/*
 * Creator World – publika formulär (ansökan, inloggning, status).
 * Minimal, eget utseende baserat på Dekaleriets profil – lånar
 * medvetet inget från temats standardformulär eller wp-admin.
 */

.dcw-card {
	max-width: 560px;
	/* Etapp 17 (del 1) tillägg - temats fasta vita header (position: fixed,
	   116px hög) ligger annars ovanpå kortets topp på dessa fristående
	   sidor, som inte får den top-offset temat normalt räknar med. */
	margin: calc(116px + 2.5rem) auto 2.5rem;
	padding: 2rem;
	background: #ffffff;
	border: 1px solid #e4e4e4;
	border-top: 4px solid #83adb2;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: #111111;
}

/*
 * Etapp 17 (del 1) - "Bli Creator"-sidan omgärdas nu av en hero, en
 * kort fördelsrad och en FAQ runt det befintliga ansökningskortet
 * (.dcw-card ovan, oförändrat) - sidan bestod tidigare bara av ett
 * enda kort på tom vit yta.
 */
.dcw-bridge-page {
	max-width: 880px;
	margin: 0 auto;
	/* Header-offsetten (116px, se .dcw-card ovan) ligger nu på heroen
	   istället, som en del av dess fulla bakgrundsyta - se
	   .dcw-bridge-hero nedan. */
	padding: 0 1.5rem 3rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.dcw-bridge-page .dcw-card {
	margin: 0 auto 2.5rem;
}

/*
 * Etapp 17 (del 3) - heroen bryter medvetet ut ur sidans max-bredd och
 * fyller hela viewportens bredd (samma tekniken som temats egna
 * sektioner), med samma teal-toning som startsidans hero och
 * marketplace-sidan - annars ser sidan ut som en smal mobilkolumn på
 * en stor skärm och saknar helt Dekaleriets färg.
 */
.dcw-bridge-hero {
	position: relative;
	text-align: center;
	color: #ffffff;
	padding: calc(116px + 3rem) 1.5rem 2.75rem;
	margin: 0 0 2.5rem;
}

.dcw-bridge-hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: linear-gradient(135deg, #83adb2 0%, #3f6469 100%);
	z-index: -1;
}

.dcw-bridge-hero h1 {
	font-size: 2.1rem;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 0.75rem;
}

.dcw-bridge-hero p {
	color: #ffffff;
	opacity: 0.95;
	font-size: 1.05rem;
	line-height: 1.55;
	max-width: 46ch;
	margin: 0 auto;
}

.dcw-bridge-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin: 2rem 0 2.5rem;
}

.dcw-benefit-item {
	flex: 1 1 180px;
	max-width: 220px;
	background: rgba(131, 173, 178, 0.08);
	border: 1px solid rgba(131, 173, 178, 0.3);
	border-radius: 12px;
	padding: 1.1rem 1.1rem;
	text-align: center;
}

.dcw-benefit-title {
	display: block;
	font-weight: 700;
	color: #1d4d47;
	font-size: 0.95rem;
	margin-bottom: 0.4rem;
}

.dcw-benefit-text {
	display: block;
	font-size: 0.85rem;
	color: #555555;
	line-height: 1.5;
}

.dcw-bridge-faq {
	max-width: 640px;
	margin: 0 auto;
}

.dcw-bridge-faq h2 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #000000;
	margin: 0 0 1rem;
	text-align: center;
}

.dcw-faq-item {
	border-bottom: 1px solid #e4e4e4;
	padding: 0.85rem 0;
}

.dcw-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	color: #111111;
	font-size: 0.95rem;
}

.dcw-faq-item summary:hover {
	color: #3d7c82;
}

.dcw-faq-item p {
	margin: 0.6rem 0 0;
	color: #555555;
	font-size: 0.9rem;
	line-height: 1.55;
}

.dcw-card h1,
.dcw-card h2 {
	margin-top: 0;
	font-size: 1.4rem;
	font-weight: 700;
	color: #000000;
}

.dcw-field {
	margin-bottom: 1.1rem;
}

.dcw-field label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: #111111;
}

.dcw-field input[type="text"],
.dcw-field input[type="email"],
.dcw-field input[type="password"],
.dcw-field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid #cfcfcf;
	border-radius: 8px;
	font-size: 1rem;
	box-sizing: border-box;
}

.dcw-field input:focus,
.dcw-field textarea:focus {
	outline: none;
	border-color: #83adb2;
	box-shadow: 0 0 0 3px rgba(131, 173, 178, 0.25);
}

.dcw-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dcw-field-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.85rem;
	color: #555555;
	cursor: pointer;
}

.dcw-field-checkbox input[type="checkbox"] {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

/*
 * Etapp 17 (del 3) - primära knappar ska synas direkt (samma svart/vit
 * kontrast som startsidans "Skapa din dekal") istället för den teal
 * ton som lätt smälte in mot de nya teal-tonade ytorna på sidan.
 *
 * VIKTIGT (upptäckt vid liveverifiering av v1.0.23): temats egna
 * theme-frontend.css innehåller en knapp-reset,
 * "[type="button"], [type="reset"], [type="submit"], button { background-color: initial; }",
 * som har EXAKT samma CSS-specificitet som en enkel klass som
 * .dcw-button (0,1,0) och laddas efter vårt stylesheet - den vinner
 * därför striden och gjorde knappen genomskinlig (vit text på vit/
 * genomskinlig botten = osynlig knapp). Det är sannolikt den knapp-
 * bugg som redan fanns innan den här etappen. !important på just
 * background löser det utan att påverka något annat.
 */
.dcw-button {
	display: inline-block;
	width: 100%;
	padding: 0.75rem 1rem;
	background: #000000 !important;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

.dcw-button:hover {
	background: #262626;
	color: #ffffff;
}

.dcw-notice {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	margin-bottom: 1.25rem;
	font-size: 0.92rem;
}

.dcw-notice--error {
	background: #fdecec;
	color: #8a1f1f;
	border: 1px solid #f3c7c7;
}

.dcw-notice--success {
	background: #eaf4f2;
	color: #1d4d47;
	border: 1px solid #bfe0da;
}

.dcw-status-badge {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

.dcw-status-badge--pending {
	background: #fff4dd;
	color: #8a5a00;
}

.dcw-status-badge--approved {
	background: #eaf4f2;
	color: #1d4d47;
}

.dcw-status-badge--rejected {
	background: #fdecec;
	color: #8a1f1f;
}

.dcw-muted {
	color: #555555;
	font-size: 0.92rem;
}

.dcw-link {
	color: #3d7c82;
	font-weight: 600;
	text-decoration: none;
}

.dcw-link:hover {
	text-decoration: underline;
}