/* =========================================================
   Shrang Create New Page
   File: wp-content/plugins/sharang-music-generator/assets/css/create-new.css

   Purpose:
   Page-level design for Create New workspace only.
   Keeps PHP feature logic separated while giving this page one clear visual system.

   Brand:
   Orange: #FA5420
   Charcoal: #111111
   Warm cream / peach backgrounds
   Controlled purple: #7C3AED
   Controlled teal: #14B8A6
   ========================================================= */

.shrang-create-new-page {
	--shrang-create-orange: #FA5420;
	--shrang-create-orange-dark: #D84315;
	--shrang-create-black: #111111;
	--shrang-create-text: #2f2f2f;
	--shrang-create-muted: #666666;
	--shrang-create-cream: #FFF7F2;
	--shrang-create-peach: #FFE6D8;
	--shrang-create-border: #F0D8CE;
	--shrang-create-purple: #7C3AED;
	--shrang-create-teal: #14B8A6;

	width: min(100%, 1120px);
	margin: 0 auto;
	padding: clamp(18px, 3vw, 32px);
	border: 1px solid rgba(250, 84, 32, 0.16);
	border-radius: 24px;
	background:
		radial-gradient(circle at 0% 0%, rgba(250, 84, 32, 0.10), transparent 30%),
		radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.055), transparent 32%),
		linear-gradient(180deg, #ffffff 0%, #fffaf7 100%);
	box-shadow: 0 18px 46px rgba(17, 17, 17, 0.06);
	box-sizing: border-box;
}

.shrang-create-new-page *,
.shrang-create-new-page *::before,
.shrang-create-new-page *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------
   1. Top workspace hero / options
--------------------------------------------------------- */
.shrang-create-new-page .sharang-create-new-hero,
.shrang-create-new-page .sharang-create-hub {
	margin: 0 0 22px;
	padding: clamp(22px, 3.4vw, 34px);
	border: 1px solid rgba(250, 84, 32, 0.20);
	border-radius: 24px;
	background:
		radial-gradient(circle at 8% 0%, rgba(250, 84, 32, 0.12), transparent 34%),
		radial-gradient(circle at 92% 18%, rgba(124, 58, 237, 0.055), transparent 28%),
		linear-gradient(180deg, #ffffff 0%, #fff8f2 100%);
	box-shadow: 0 12px 28px rgba(17, 17, 17, 0.045);
}

.shrang-create-new-page .sharang-create-new-kicker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 8px;
	padding: 5px 11px;
	color: #9a3412;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.2;
	border: 1px solid rgba(250, 84, 32, 0.20);
	border-radius: 999px;
	background: #fff2ed;
}

.shrang-create-new-page .sharang-create-new-hero h2,
.shrang-create-new-page .sharang-create-hub h2 {
	margin: 0 0 10px;
	color: var(--shrang-create-black);
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 950;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.shrang-create-new-page .sharang-create-new-intro,
.shrang-create-new-page .sharang-create-hub > p {
	max-width: 820px;
	margin: 0 0 22px;
	color: var(--shrang-create-text);
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.7;
}

.shrang-create-new-page .sharang-create-options,
.shrang-create-new-page .sharang-create-new-options {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
}

.shrang-create-new-page .sharang-create-option,
.shrang-create-new-page .sharang-create-new-option {
	position: relative;
	display: flex;
	min-height: 168px;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	overflow: hidden;
	color: var(--shrang-create-black);
	text-decoration: none;
	border: 1px solid rgba(250, 84, 32, 0.20);
	border-top: 5px solid var(--shrang-create-orange);
	border-radius: 18px;
	background:
		radial-gradient(circle at 100% 100%, rgba(250, 84, 32, 0.10), transparent 34%),
		#ffffff;
	box-shadow: 0 10px 24px rgba(17, 17, 17, 0.045);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.shrang-create-new-page .sharang-create-option:hover,
.shrang-create-new-page .sharang-create-new-option:hover {
	transform: translateY(-2px);
	border-color: rgba(250, 84, 32, 0.34);
	box-shadow: 0 16px 34px rgba(17, 17, 17, 0.075);
	text-decoration: none;
}

.shrang-create-new-page .sharang-create-option-primary,
.shrang-create-new-page .sharang-create-new-option-song {
	border-color: rgba(250, 84, 32, 0.36);
	background:
		radial-gradient(circle at 100% 100%, rgba(250, 84, 32, 0.18), transparent 38%),
		linear-gradient(180deg, #ffffff 0%, #fff4ee 100%);
}

.shrang-create-new-page .sharang-create-new-option-upload {
	border-top-color: var(--shrang-create-teal);
	background:
		radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.12), transparent 38%),
		#ffffff;
}

.shrang-create-new-page .sharang-create-new-option-reel {
	border-top-color: var(--shrang-create-purple);
	background:
		radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.11), transparent 38%),
		#ffffff;
}

.shrang-create-new-page .sharang-create-new-option-bed-music {
	border-top-color: var(--shrang-create-teal);
	background:
		radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.11), transparent 38%),
		#ffffff;
}

.shrang-create-new-page .sharang-create-new-option-marker {
	display: block;
	width: 22px;
	height: 5px;
	margin-bottom: 2px;
	border-radius: 999px;
	background: var(--shrang-create-orange);
}

.shrang-create-new-page .sharang-create-new-option-upload .sharang-create-new-option-marker,
.shrang-create-new-page .sharang-create-new-option-bed-music .sharang-create-new-option-marker {
	background: var(--shrang-create-teal);
}

.shrang-create-new-page .sharang-create-new-option-reel .sharang-create-new-option-marker {
	background: var(--shrang-create-purple);
}

.shrang-create-new-page .sharang-create-option strong,
.shrang-create-new-page .sharang-create-new-option strong {
	display: block;
	color: var(--shrang-create-black);
	font-size: 18px;
	font-weight: 950;
	line-height: 1.22;
	letter-spacing: -0.01em;
}

.shrang-create-new-page .sharang-create-option span,
.shrang-create-new-page .sharang-create-new-option span:not(.sharang-create-new-option-marker) {
	display: block;
	color: #444444;
	font-size: 13.5px;
	line-height: 1.55;
}

.shrang-create-new-page .sharang-create-option em,
.shrang-create-new-page .sharang-create-new-option em {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin-top: auto;
	padding: 8px 13px;
	color: #ffffff;
	font-size: 12.5px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	border-radius: 999px;
	background: var(--shrang-create-black);
}

.shrang-create-new-page .sharang-create-option-primary em,
.shrang-create-new-page .sharang-create-new-option-song em {
	background: var(--shrang-create-orange);
}

/* ---------------------------------------------------------
   2. Main creation sections
--------------------------------------------------------- */
.shrang-create-new-page .sharang-create-new-section,
.shrang-create-new-page .sharang-create-section,
.shrang-create-new-page .sharang-create-song-section {
	position: relative;
	margin: 0 0 22px;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid var(--shrang-create-border);
	border-radius: 22px;
	background:
		radial-gradient(circle at 0% 0%, rgba(250, 84, 32, 0.07), transparent 30%),
		#ffffff;
	box-shadow: 0 12px 30px rgba(17, 17, 17, 0.042);
}

.shrang-create-new-page .sharang-create-new-section::before,
.shrang-create-new-page .sharang-create-section::before,
.shrang-create-new-page .sharang-create-song-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 22px 22px 0 0;
	background: var(--shrang-create-orange);
}

.shrang-create-new-page .sharang-create-new-section-upload::before {
	background: var(--shrang-create-teal);
}

.shrang-create-new-page .sharang-create-new-section-reel::before {
	background: var(--shrang-create-purple);
}

.shrang-create-new-page .sharang-create-new-section-bed-music::before {
	background: var(--shrang-create-teal);
}

.shrang-create-new-page .sharang-create-new-section h2,
.shrang-create-new-page .sharang-create-new-section h3,
.shrang-create-new-page .sharang-create-section h2,
.shrang-create-new-page .sharang-create-section h3,
.shrang-create-new-page .sharang-create-song-section h2 {
	margin: 0 0 10px;
	color: var(--shrang-create-black);
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 950;
	line-height: 1.15;
	letter-spacing: -0.025em;
}

.shrang-create-new-page .sharang-create-new-section > p,
.shrang-create-new-page .sharang-create-section > p,
.shrang-create-new-page .sharang-create-song-section > p {
	margin: 0 0 20px;
	color: var(--shrang-create-text);
	font-size: 15px;
	line-height: 1.7;
}

/* ---------------------------------------------------------
   3. Forms and fields
--------------------------------------------------------- */
.shrang-create-new-page form {
	margin: 0;
}

.shrang-create-new-page form p {
	margin: 0 0 18px;
}

.shrang-create-new-page label,
.shrang-create-new-page .sharang-create-new-form label {
	display: block;
	margin: 0 0 7px;
	color: var(--shrang-create-black);
	font-size: 13.5px;
	font-weight: 900;
	line-height: 1.35;
}

.shrang-create-new-page label strong {
	color: inherit;
	font-weight: 950;
}

.shrang-create-new-page input[type="text"],
.shrang-create-new-page input[type="number"],
.shrang-create-new-page input[type="email"],
.shrang-create-new-page input[type="url"],
.shrang-create-new-page select,
.shrang-create-new-page textarea,
.shrang-create-new-page .sharang-select {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	color: var(--shrang-create-black);
	font-size: 14px;
	line-height: 1.45;
	border: 1px solid rgba(17, 17, 17, 0.16);
	border-radius: 12px;
	background-color: #ffffff;
	box-shadow: 0 2px 0 rgba(17, 17, 17, 0.015);
	outline: none;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.shrang-create-new-page select,
.shrang-create-new-page .sharang-select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: 38px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--shrang-create-orange) 50%),
		linear-gradient(135deg, var(--shrang-create-orange) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) 50%,
		calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

body.shrang-app-dir-rtl .shrang-create-new-page select,
body.shrang-app-dir-rtl .shrang-create-new-page .sharang-select,
.shrang-create-new-page.shrang-app-dir-rtl select,
.shrang-create-new-page.shrang-app-dir-rtl .sharang-select {
	padding-inline-start: 38px;
	padding-inline-end: 13px;
	background-position:
		20px 50%,
		14px 50%;
}

.shrang-create-new-page textarea {
	min-height: 160px;
	resize: vertical;
}

.shrang-create-new-page input:focus,
.shrang-create-new-page select:focus,
.shrang-create-new-page textarea:focus,
.shrang-create-new-page .sharang-select:focus {
	border-color: rgba(250, 84, 32, 0.70);
	box-shadow:
		0 0 0 3px rgba(250, 84, 32, 0.12),
		0 3px 10px rgba(17, 17, 17, 0.035);
}

.shrang-create-new-page small,
.shrang-create-new-page .description {
	display: block;
	margin-top: 7px;
	color: var(--shrang-create-muted);
	font-size: 12.5px;
	line-height: 1.55;
}

.shrang-create-new-page .shrang-guest-limit-note {
	margin: 0 0 18px;
	padding: 12px 14px;
	color: #8a3417;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	border: 1px solid rgba(250, 84, 32, 0.18);
	border-radius: 13px;
	background: #fff6f0;
}

/* File fields */
.shrang-create-new-page input[type="file"] {
	width: 100%;
	padding: 13px;
	color: #444444;
	font-size: 13px;
	border: 1px dashed rgba(250, 84, 32, 0.35);
	border-radius: 14px;
	background:
		radial-gradient(circle at 0% 0%, rgba(250, 84, 32, 0.06), transparent 28%),
		#ffffff;
	cursor: pointer;
}

.shrang-create-new-page input[type="file"]::file-selector-button {
	margin-inline-end: 12px;
	padding: 9px 13px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 900;
	border: 0;
	border-radius: 999px;
	background: var(--shrang-create-black);
	cursor: pointer;
}

/* Checkboxes */
.shrang-create-new-page .sharang-legal-confirmation,
.shrang-create-new-page .sharang-public-confirmation {
	margin: 16px 0;
	padding: 13px 14px;
	border: 1px solid rgba(250, 84, 32, 0.16);
	border-radius: 14px;
	background: #fffaf7;
}

.shrang-create-new-page .sharang-legal-confirmation label,
.shrang-create-new-page .sharang-public-confirmation label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	color: #333333;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.55;
}

.shrang-create-new-page input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 18px;
	accent-color: var(--shrang-create-orange);
}

/* Buttons */
.shrang-create-new-page button,
.shrang-create-new-page input[type="submit"],
.shrang-create-new-page .button,
.shrang-create-new-page .sharang-download-link,
.shrang-create-new-page .sharang-secondary-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.1;
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	background: var(--shrang-create-black);
	box-shadow: none;
	cursor: pointer;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.shrang-create-new-page button[type="submit"],
.shrang-create-new-page input[type="submit"] {
	background: var(--shrang-create-black);
}

.shrang-create-new-page .sharang-create-new-section-song button[type="submit"],
.shrang-create-new-page .sharang-create-song-section button[type="submit"] {
	background: var(--shrang-create-orange);
}

.shrang-create-new-page .sharang-secondary-link {
	color: var(--shrang-create-black);
	border: 1px solid rgba(17, 17, 17, 0.12);
	background: #ffffff;
}

.shrang-create-new-page button:hover,
.shrang-create-new-page input[type="submit"]:hover,
.shrang-create-new-page .button:hover,
.shrang-create-new-page .sharang-download-link:hover,
.shrang-create-new-page .sharang-secondary-link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(17, 17, 17, 0.10);
	text-decoration: none;
}

/* ---------------------------------------------------------
   4. Generate Reel selector
--------------------------------------------------------- */
.shrang-create-new-page .sharang-create-reel-selector {
	margin-top: 18px;
}

.shrang-create-new-page .sharang-create-new-section-reel .sharang-secondary-link {
	margin-inline-end: 8px;
	margin-bottom: 8px;
}

/* ---------------------------------------------------------
   5. Embedded section compatibility
   These selectors help forms rendered by audio-upload.php and bed-music-generator.php
   without requiring logic changes in those files.
--------------------------------------------------------- */
.shrang-create-new-page .sharang-audio-upload-form,
.shrang-create-new-page .sharang-bed-music-form,
.shrang-create-new-page .sharang-upload-audio-form {
	margin-top: 18px;
}

.shrang-create-new-page .sharang-result {
	border-radius: 16px;
}

.shrang-create-new-page .sharang-result-error {
	border-color: rgba(185, 28, 28, 0.22);
	background: #fff7f7;
}

.shrang-create-new-page .sharang-result-success {
	border-color: rgba(20, 184, 166, 0.24);
	background: #f2fffb;
}

/* ---------------------------------------------------------
   6. RTL support
--------------------------------------------------------- */
body.shrang-app-dir-rtl .shrang-create-new-page,
.shrang-create-new-page.shrang-app-dir-rtl {
	text-align: right;
}

body.shrang-app-dir-rtl .shrang-create-new-page .sharang-create-new-hero h2,
body.shrang-app-dir-rtl .shrang-create-new-page .sharang-create-new-section h2,
body.shrang-app-dir-rtl .shrang-create-new-page .sharang-create-new-section h3,
.shrang-create-new-page.shrang-app-dir-rtl .sharang-create-new-hero h2,
.shrang-create-new-page.shrang-app-dir-rtl .sharang-create-new-section h2,
.shrang-create-new-page.shrang-app-dir-rtl .sharang-create-new-section h3 {
	letter-spacing: 0;
}

/* ---------------------------------------------------------
   7. Mobile
--------------------------------------------------------- */
@media (max-width: 1000px) {
	.shrang-create-new-page .sharang-create-options,
	.shrang-create-new-page .sharang-create-new-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.shrang-create-new-page {
		width: 100%;
		padding: 12px;
		border-radius: 18px;
	}

	.shrang-create-new-page .sharang-create-new-hero,
	.shrang-create-new-page .sharang-create-hub,
	.shrang-create-new-page .sharang-create-new-section,
	.shrang-create-new-page .sharang-create-section,
	.shrang-create-new-page .sharang-create-song-section {
		padding: 18px 14px;
		border-radius: 18px;
	}

	.shrang-create-new-page .sharang-create-options,
	.shrang-create-new-page .sharang-create-new-options {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.shrang-create-new-page .sharang-create-option,
	.shrang-create-new-page .sharang-create-new-option {
		min-height: auto;
		padding: 15px;
	}

	.shrang-create-new-page .sharang-create-new-hero h2,
	.shrang-create-new-page .sharang-create-hub h2 {
		font-size: clamp(28px, 9vw, 40px);
	}

	.shrang-create-new-page .sharang-create-new-section h2,
	.shrang-create-new-page .sharang-create-new-section h3,
	.shrang-create-new-page .sharang-create-section h2,
	.shrang-create-new-page .sharang-create-section h3,
	.shrang-create-new-page .sharang-create-song-section h2 {
		font-size: clamp(24px, 8vw, 34px);
	}

	.shrang-create-new-page textarea {
		min-height: 150px;
	}

	.shrang-create-new-page button,
	.shrang-create-new-page input[type="submit"],
	.shrang-create-new-page .button,
	.shrang-create-new-page .sharang-download-link,
	.shrang-create-new-page .sharang-secondary-link {
		min-height: 42px;
		padding: 10px 16px;
		font-size: 12.5px;
	}

	.shrang-create-new-page .sharang-create-new-section-song button[type="submit"],
	.shrang-create-new-page .sharang-create-song-section button[type="submit"] {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.shrang-create-new-page {
		padding: 10px;
	}

	.shrang-create-new-page .sharang-create-new-hero,
	.shrang-create-new-page .sharang-create-hub,
	.shrang-create-new-page .sharang-create-new-section,
	.shrang-create-new-page .sharang-create-section,
	.shrang-create-new-page .sharang-create-song-section {
		padding: 16px 12px;
	}

	.shrang-create-new-page .sharang-create-new-intro,
	.shrang-create-new-page .sharang-create-hub > p,
	.shrang-create-new-page .sharang-create-new-section > p,
	.shrang-create-new-page .sharang-create-section > p,
	.shrang-create-new-page .sharang-create-song-section > p {
		font-size: 14px;
		line-height: 1.65;
	}
}