/* =====================================================
   IframeUpload.css — Saltillo iFrame v2 "Upload recording" look.

   Loaded by Views/v3/SaltilloIframe2/Upload.cshtml ON TOP of
   CreateVoice/Upload.css + CreateVoiceProgress.css. The base files keep
   the proven upload behaviour + progress/permission popups styled; this
   file reframes the page to the iframe design (tabs, white card, blue
   "Upload recording" heading, centered language row, drop zone, footer)
   per Figma 307:5629 (desktop) / 307:1052 (mobile). The v1/v3
   /v3/CreateVoice/Upload page is untouched and does not load this file.
   ===================================================== */

/* ----- Gray iframe frame, no app chrome ----- */

body
{
	/* Transparent so the widget inherits the host page background. */
	background: transparent !important;
	margin: 0;
	padding: 40px 20px;
	min-width: 320px;
	box-sizing: border-box;
}

/* The v3 layout's decorative side gradients + spacer block. */
.guard,
#dvBackgroundBlock1
{
	display: none !important;
}

#dvBodyContainer
{
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* ----- Tab header (mirrors SaltilloIframe2/Layout.css) ----- */

#dv-tabs,
.tab-item
{
	box-sizing: border-box;
}

#dv-tabs
{
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.tab-item
{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 8px 24px;
	border-radius: 24px 24px 0 0;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: rgba(0, 0, 0, 0.03);
	box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.05);
	opacity: 0.7;
	min-height: 66px;
}

	.tab-item.tab-active
	{
		background: white;
		box-shadow: 0 -3px 5px 0 rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-color: transparent;
	}

	.tab-item:hover { text-decoration: none; opacity: 0.9; }
	.tab-item.tab-active:hover { opacity: 1; }

.tab-icon
{
	width: 62px;
	height: 50px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}

	.tab-icon-personal { background-image: url(../../../images/v3/SaltilloIframe2/tab-personal.png); }
	.tab-icon-collection { background-image: url(../../../images/v3/SaltilloIframe2/tab-collection.png); }

.tab-label
{
	font-size: clamp(24px, 2vw, 28.8px);
	font-weight: 700;
	color: #292929;
}

/* The first drop-zone line is emphasized in the iframe (Figma). */
.lbl-browse-line
{
	font-weight: 700;
}

/* ----- The upload body becomes the white card below the tabs ----- */

#dvUploadBody
{
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 48px;
	background: white;
	border-radius: 0 0 24px 24px;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);

	display: flex;
	flex-direction: column;
	align-items: center;
	/* Inner content is 8px apart (Figma 643:12460); back link sits 20px above the
	   heading via its own margin below. */
	gap: 8px;
}

/* Center the inner content column (Figma 643:12460, width 688). */
#dv-up-heading,
#dvLanguage,
#dvUploadRecording,
#dvFileListContainer,
#dvNavButtons,
#dv-up-footer
{
	box-sizing: border-box;
	margin: 0;
	max-width: 688px;
	width: 100%;
}

/* Mobile-only hero icon above the heading — hidden on desktop (Figma 307:1078). */
#dv-up-top-icon
{
	display: none;
}

/* ----- Back link (Figma 643:12455) ----- */

#dv-up-back
{
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	/* 8px card gap + 12px = 20px back→heading (Figma 643:12454 gap). */
	margin-bottom: 12px;
	opacity: 0.8;
	color: #4B5563;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
}

	#dv-up-back:hover
	{
		opacity: 1;
		color: #4B5563;
		text-decoration: none;
	}

.dn-back-icon
{
	width: 20px;
	height: 20px;
	background: url(../../../images/v3/SaltilloIframe/arrow_left_alt.svg) center / contain no-repeat;
}

/* ----- Heading (Figma 643:12505) ----- */

#dv-up-heading
{
	color: #00A8E1;
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.3828px;
	line-height: 34px;
}

/* ----- Audio language row (Figma 307:5635) ----- */

#dvLanguage
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
}

#lblYouAudioFile
{
	color: #00A8E1;
	font-size: 16px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

	/* Match the combo text to the blue language label. */
	#dvLanguage .cmb-selected-value
	{
		color: #00A8E1;
		font-weight: 700;
	}

/* ----- Upload drop zone (Figma 307:5639 / mobile 307:1084) ----- */

#dvUploadRecording
{
	margin: 0;
	gap: 20px;
	border-radius: 24px;
	/* Desktop drop zone has no border/shadow (Figma 307:5639) — override the v3
	   Upload.css border + shadow. Mobile re-adds them (see media query). */
	border: none;
	box-shadow: none;
	padding: 20px 24px;
}

/* Drop-zone icon. Desktop: the mailbox "upload" icon (Figma 643:12514).
   Mobile swaps this to the upload arrow in a blue circle (see media query). */
#dvUploadRecording > .img-logo
{
	content: url(../../../images/v3/SaltilloIframe2/upload-icon.png);
	width: 64px;
	height: 56px;
	margin: 0;
}

#btnBrowseFiles
{
	margin-top: 0;
	background: #00A8E1;
}

/* ----- Footer (Figma 643:12492) ----- */

#dv-up-footer
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	color: #2D2A26;
	letter-spacing: 0.2667px;
}

#img-saltillo-logo
{
	display: inline-block;
	width: 94px;
	height: 15px;
	background-image: url(../../../images/v3/SaltilloIframe/prcsaltillo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ----- Mobile: full-bleed card, no outer frame (Figma 307:1052) ----- */

@media (max-width: 600px)
{
	body { padding: 0; }

	/* No tab header on mobile for this page (Figma 307:1052). */
	#dv-tabs { display: none; }

	#dvUploadBody
	{
		max-width: none;
		border-radius: 0;
		padding: 24px 16px;
		gap: 16px;
	}

	/* Back link has no extra bottom margin on mobile (the hero icon follows). */
	#dv-up-back { margin-bottom: 0; }

	/* Hero mailbox icon above the heading (Figma 307:1078). The 24px margins +
	   16px card gap approximate the design's 40px breathing room around the
	   icon + heading block. */
	#dv-up-top-icon
	{
		display: block;
		width: 100%;
		height: 65px;
		margin-top: 24px;
		background: url(../../../images/v3/SaltilloIframe2/upload-icon.png) center / contain no-repeat;
	}

	#dv-up-heading
	{
		font-size: 40px;
		margin-bottom: 24px;
	}

	/* Mobile drop zone is a bordered card with a soft shadow (Figma 307:1084). */
	#dvUploadRecording
	{
		border: 1px solid rgba(0, 0, 0, 0.05);
		box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.05);
		padding: 32px 24px;
	}

	/* Drop-zone icon on mobile is the upload arrow inside a light-blue circle
	   (Figma 307:1085/307:1086) — the action itself. */
	#dvUploadRecording > .img-logo
	{
		content: url(../../../images/v3/SaltilloIframe2/upload-btn.png?2);
		width: 65px;
		height: 65px;
		box-sizing: border-box;		
		border-radius: 50%;
		background: #E6F7FE;
	}

	#dv-up-footer { font-size: 12px; }
}