/**
 * Listing submission (Add Listing) redesign (redesign8) - Custom Classifieds UK.
 *
 * A reskin of the existing wp-cardealer CMB2 submit form and the wc-paid-listings
 * package chooser. It only restyles and regroups; every field name, validation,
 * handler and the upload mechanics are untouched. Scoped to .cc-submit. Tokens
 * are declared here because the form renders outside the .cc-fp wrapper.
 */

.cc-submit,
.cc-submit-page {
	--gold: #a59055;
	--gold-hover: #c9b47a;
	--gold-hover-dark: #8a7743;
	--ink: #171610;
	--page: #f6f4ef;
	--card: #fff;
	--hair: #e2ded4;
	--body: #5c584e;
	--muted: #8a857a;
	--dark-hair: #26241e;
	--dark-text: #f0ede6;
	--dark-muted-a: #b5b1a8;
	--dark-muted-b: #8d8a83;
	--tint: #faf7ef;
	--error: #b0432e;
}

.cc-submit-page { background: var(--page); }
.cc-submit {
	background: var(--page);
	color: var(--ink);
	font-family: 'Barlow', sans-serif;
}
.cc-submit *,
.cc-submit *::before,
.cc-submit *::after { box-sizing: border-box; }

/* ============================ HERO ============================ */
.cc-submit-hero { background: var(--ink); padding: 40px 56px; }
.cc-submit-hero-inner {
	max-width: 980px; margin: 0 auto;
	display: flex; align-items: center; gap: 40px;
}
.cc-submit-hero-title {
	font-family: 'Bebas Neue', sans-serif; font-size: 52px; line-height: 0.95;
	margin: 0; font-weight: 400; color: #fff;
}
.cc-submit-hero-sub { font-size: 15px; color: var(--dark-muted-a); margin-top: 8px; }

.cc-submit-steps {
	margin-left: auto; display: flex; gap: 10px; align-items: center;
	font-size: 13px; font-weight: 600; color: var(--dark-muted-b);
}
.cc-submit-step { display: flex; align-items: center; gap: 8px; }
.cc-submit-step-num {
	width: 26px; height: 26px; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: 'Bebas Neue', sans-serif; font-size: 15px;
	background: var(--dark-hair); color: var(--gold);
}
.cc-submit-step--active .cc-submit-step-num,
.cc-submit-step--done .cc-submit-step-num { background: var(--gold); color: var(--ink); }
.cc-submit-step-label { white-space: nowrap; }
.cc-submit-step--active .cc-submit-step-label { color: var(--dark-text); }
.cc-submit-step-bar { width: 26px; height: 1px; background: var(--dark-hair); }
/* Clickable steps (Details/Photos/Location navigate to their card). */
.cc-submit-step--link { color: inherit; text-decoration: none; cursor: pointer; }
.cc-submit-step--link:hover .cc-submit-step-label { color: var(--dark-text); }
.cc-submit-step--link:hover .cc-submit-step-num { background: var(--gold-hover); color: var(--ink); }
/* Offset so a scrolled-to card clears the sticky site header. */
.cc-submit .before-group-row { scroll-margin-top: 90px; }

/* ============================ BODY ============================ */
.cc-submit-body { max-width: 980px; margin: 0 auto; padding: 36px 20px 60px; }
.cc-submit .listing-submission-form-wrapper { counter-reset: cc-card; }
.cc-submit .title-profile { display: none; } /* theme's "Add New Listing" h1 */

/* Alerts */
.cc-submit-alert {
	border: 1px solid var(--hair); background: #fff; padding: 14px 18px;
	margin-bottom: 18px; font-size: 14px; color: var(--body);
}
.cc-submit-alert--error { border-color: var(--error); color: var(--error); background: #fdf3f0; }
.cc-submit-alert--success { border-color: var(--gold); background: var(--tint); }

/* ===================== CMB2 RESET + CARDS ===================== */
.cc-submit .cmb2-wrap,
.cc-submit .cmb2-wrap.form-table { margin: 0; padding: 0; }
.cc-submit .cmb2-metabox { display: block; }

/* Each plugin section (.before-group-row) becomes a white card. */
.cc-submit .before-group-row {
	counter-increment: cc-card;
	background: #fff; border: 1px solid var(--hair);
	margin-bottom: 24px;
}
.cc-submit .before-group-row-inner { padding: 34px 40px; }

/* Section heading row */
.cc-submit .cmb-row.cmb-type-title { padding: 0; margin: 0 0 20px; border: 0; }
.cc-submit .cmb-type-title .cmb-th { display: none; }
.cc-submit .cmb-type-title .cmb-td { display: block; padding: 0; margin: 0; }
.cc-submit .cmb2-metabox-title {
	font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 30px;
	color: var(--ink); margin: 0; line-height: 1;
	display: flex; align-items: baseline; gap: 14px;
}
.cc-submit .cmb2-metabox-title::before {
	content: counter(cc-card);
	color: var(--gold); font-family: 'Bebas Neue', sans-serif; font-size: 30px;
}

/* Field rows: stack label over input, full width. */
.cc-submit .cmb-row {
	display: block; width: 100%; margin: 0 0 20px; padding: 0; border: 0; float: none;
}
.cc-submit .cmb-row:last-child { margin-bottom: 0; }
.cc-submit .cmb-th,
.cc-submit .cmb-td { display: block; width: auto; float: none; margin: 0; padding: 0; }
.cc-submit .cmb-th,
.cc-submit .cmb-th label {
	font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
	color: var(--muted); margin: 0 0 6px; display: block; line-height: 1.3;
}
.cc-submit .cmb-th .required { color: var(--error); }
.cc-submit .cmb2-metabox-description { font-size: 12px; color: var(--muted); margin: 5px 0 0; }

/* Inputs / textarea */
.cc-submit .cmb-td input[type="text"],
.cc-submit .cmb-td input[type="number"],
.cc-submit .cmb-td input[type="email"],
.cc-submit .cmb-td input[type="url"],
.cc-submit .cmb-td textarea {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--hair); background: #fff; color: var(--ink);
	font-family: 'Barlow', sans-serif; font-size: 15px; padding: 13px 15px;
	border-radius: 0; box-shadow: none; line-height: 1.4;
}
.cc-submit .cmb-td textarea { min-height: 140px; resize: vertical; }
.cc-submit .cmb-td input:focus,
.cc-submit .cmb-td textarea:focus { outline: none; border-color: var(--gold); box-shadow: none; }

/* Three-column grid for the Bike Details section (plugin adds .columns-3).
   The parent theme lays these out with floats (width:33.33%; float:left on each
   child), which, left in place, shrinks each grid item to a third of its track.
   Neutralise that so the CSS grid controls the columns and inputs fill them. */
.cc-submit .before-group-row.columns-3 .before-group-row-inner {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; align-items: start;
	margin-left: 0; margin-right: 0;
}
.cc-submit .before-group-row.columns-3 .before-group-row-inner > div {
	width: auto; float: none; padding-left: 0; padding-right: 0;
}
.cc-submit .before-group-row.columns-3 .cmb-row { margin-bottom: 0; }
.cc-submit .before-group-row.columns-3 .cmb-type-title,
.cc-submit .before-group-row.columns-3 .cmb2-id--listing-title,
.cc-submit .before-group-row.columns-3 .cmb2-id--listing-description { grid-column: 1 / -1; }

/* ===================== SELECT2 (native selects) ===================== */
.cc-submit .select2-container { width: 100% !important; }
.cc-submit .select2-container--default .select2-selection--single {
	height: auto; border: 1px solid var(--hair); border-radius: 0; background: #fff;
}
.cc-submit .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--ink); line-height: 1.4; padding: 13px 34px 13px 15px; font-size: 15px;
}
.cc-submit .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%; right: 10px;
}
.cc-submit .select2-container--default.select2-container--focus .select2-selection--single,
.cc-submit .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--gold); }
/* Fallback for any un-enhanced <select> */
.cc-submit .cmb-td select {
	width: 100%; box-sizing: border-box; border: 1px solid var(--hair);
	background: #fff; color: var(--ink); font-family: 'Barlow', sans-serif;
	font-size: 15px; padding: 13px 15px; border-radius: 0;
}

/* ===================== FILE UPLOADS ===================== */
.cc-submit .cmb-type-wp-cardealer-file .cmb-td { display: block; }
.cc-submit .wp-cardealer-uploaded-files {
	display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
}
.cc-submit .wp-cardealer-uploaded-files:empty { margin-bottom: 0; }
/* Bigger thumbnails: at 120px you cannot tell a photo is sideways, and there is
   no room for the rotate control. Show the true aspect ratio so orientation is
   obvious. */
.cc-submit .wp-cardealer-uploaded-file-preview {
	position: relative; display: inline-block; line-height: 0;
}
.cc-submit .wp-cardealer-uploaded-files img,
.cc-submit .wp-cardealer-uploaded-files .uploaded-file,
.cc-submit .wp-cardealer-uploaded-files li {
	border: 1px solid var(--hair); max-width: 170px; max-height: 170px;
	width: auto; height: auto; display: block; list-style: none;
}
.cc-submit .wp-cardealer-uploaded-file-preview.is-rotating img { opacity: 0.45; }

/* Rotate control overlaid on each in-progress photo. */
.cc-submit .cc-rotate-btn {
	position: absolute; top: 6px; left: 6px;
	width: 30px; height: 30px; line-height: 1; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(23, 22, 16, 0.85); color: #fff; border: 0; cursor: pointer;
	font-size: 17px; border-radius: 0;
}
.cc-submit .cc-rotate-btn:hover { background: var(--gold); color: var(--ink); }
.cc-submit .cc-rotate-btn:disabled { cursor: default; opacity: 0.6; }
/* Neutralise the parent theme's .label-can-drag (a white box that turns full-
   width gold on hover). The .cmb-td prefix outranks div.cmb2-wrap .label-can-drag
   so the parent hover cannot win. The inner .upload-file-btn is our dashed tile;
   no hover change (keeps it simple and avoids the gold-on-gold problem). */
.cc-submit .cmb-td .label-can-drag,
.cc-submit .cmb-td .label-can-drag:hover,
.cc-submit .cmb-td .label-can-drag:active {
	display: block; background: none !important; border: 0 !important; border-radius: 0;
	padding: 0; color: inherit !important; font-size: inherit;
}
.cc-submit .upload-file-btn {
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; font-family: 'Bebas Neue', sans-serif; font-size: 18px;
	letter-spacing: 1.5px; text-transform: uppercase; padding: 16px 26px; min-width: 220px;
}
/* No hover change at all: the appearance is forced identical in every state so
   no parent/plugin hover rule can produce gold-on-gold. */
.cc-submit .upload-file-btn,
.cc-submit .upload-file-btn:hover,
.cc-submit .upload-file-btn:focus,
.cc-submit .upload-file-btn:active {
	background: var(--tint) !important;
	border: 1px dashed var(--gold) !important;
	color: var(--gold) !important;
}
.cc-submit .upload-file-btn span,
.cc-submit .upload-file-btn:hover span { color: var(--gold) !important; }

/* ===================== MAP ===================== */
.cc-submit .pw-map-search-wrapper { margin-bottom: 12px; }
.cc-submit .pw-map-search {
	width: 100%; box-sizing: border-box; border: 1px solid var(--hair);
	background: #fff; color: var(--ink); font-family: 'Barlow', sans-serif;
	font-size: 15px; padding: 13px 15px; border-radius: 0;
}
.cc-submit .pw-map { height: 230px; border: 1px solid var(--hair); background: #e9e5da; }
/* Raw lat/long stay in the form (the map still syncs them) but are hidden.
   !important because the map script sets an inline display on these inputs. */
.cc-submit .pw-map-latitude,
.cc-submit .pw-map-longitude { display: none !important; }

/* ===================== SUBMIT BAR ===================== */
.cc-submit .submit-button-wrapper { margin: 0; }
.cc-submit-bar {
	background: var(--ink); padding: 24px 30px; margin-top: 24px;
	display: flex; align-items: center; gap: 24px;
}
.cc-submit-bar-head { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: #fff; letter-spacing: 0.5px; }
.cc-submit-bar-note { font-size: 13px; color: var(--dark-muted-b); margin-top: 4px; max-width: 520px; }
.cc-submit-bar-actions { margin-left: auto; display: flex; gap: 12px; }
.cc-submit-go {
	background: var(--gold); color: var(--ink); border: 0; cursor: pointer;
	font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: 1.5px;
	padding: 12px 30px; text-transform: uppercase;
}
.cc-submit-go:hover { background: var(--gold-hover); color: var(--ink); }

/* ===================== PACKAGE SCREEN (redesign9) ===================== */
.cc-submit--package .cc-submit-body { display: flex; flex-direction: column; gap: 24px; }
.cc-pkg-card { background: #fff; border: 1px solid var(--hair); padding: 34px 40px; }
.cc-pkg-heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 30px; color: var(--ink); margin: 0 0 6px; }
.cc-pkg-sub { margin: 0 0 22px; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Divider */
.cc-pkg-divider { display: flex; align-items: center; gap: 18px; padding: 0 8px; }
.cc-pkg-divider-line { flex: 1; height: 1px; background: var(--hair); }
.cc-pkg-divider-text { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }

/* Credit tiles (radio-backed, selection is pure CSS) */
.cc-credits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cc-credit { position: relative; }
.cc-credit-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cc-credit-tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	text-align: left; cursor: pointer; padding: 20px 22px; height: 100%;
	background: #fff; border: 1px solid var(--hair);
}
.cc-credit-radio:checked + .cc-credit-tile { border: 2px solid var(--gold); background: var(--tint); padding: 19px 21px; }
.cc-credit-radio:focus-visible + .cc-credit-tile { outline: 2px solid var(--gold); outline-offset: 2px; }
.cc-credit-name { font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--gold); text-transform: uppercase; }
.cc-credit-count { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--ink); line-height: 1; }
.cc-credit-count-unit { font-size: 19px; color: var(--muted); }
.cc-credit-terms { font-size: 13px; color: var(--muted); }

.cc-credit-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.cc-credit-publish {
	background: var(--gold); color: var(--ink); border: 0; cursor: pointer;
	font-family: 'Bebas Neue', sans-serif; font-size: 21px; letter-spacing: 1.5px;
	padding: 14px 34px; text-transform: uppercase;
}
.cc-credit-publish:hover { background: var(--gold-hover); }
.cc-credit-note { font-size: 13px; color: var(--muted); }

/* Buy cards */
.cc-buy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cc-buy-card {
	background: #fff; border: 1px solid var(--hair); padding: 26px 24px;
	display: flex; flex-direction: column; gap: 10px; position: relative;
}
.cc-buy-card.is-featured { border: 2px solid var(--gold); background: var(--tint); }
.cc-buy-tag {
	position: absolute; top: -11px; left: 22px; background: var(--gold); color: #fff;
	font-size: 10px; font-weight: 700; letter-spacing: 2px; padding: 3px 9px; text-transform: uppercase;
}
.cc-buy-name { font-family: 'Bebas Neue', sans-serif; font-size: 23px; letter-spacing: 1px; color: var(--ink); }
.cc-buy-card.is-featured .cc-buy-name { color: var(--gold); }
.cc-buy-price { font-size: 36px; font-weight: 700; color: var(--ink); }
.cc-buy-price .woocommerce-Price-amount { font-weight: 700; }
.cc-buy-features { font-size: 14px; color: var(--muted); line-height: 1.6; }
.cc-buy-card.is-featured .cc-buy-features { color: var(--body); }
.cc-buy-features ul { margin: 0; padding: 0; list-style: none; }
.cc-buy-features li { padding: 2px 0; }
.cc-buy-features p { margin: 0; }
.cc-buy-btn {
	margin-top: auto; text-align: center; cursor: pointer; width: 100%; box-sizing: border-box;
	font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1.5px; padding: 11px 0; text-transform: uppercase;
}
.cc-buy-btn--outline { border: 1px solid var(--ink); background: none; color: var(--ink); }
.cc-buy-btn--outline:hover { background: var(--ink); color: #fff; }
.cc-buy-btn--gold { border: 0; background: var(--gold); color: #fff; }
.cc-buy-btn--gold:hover { background: var(--gold-hover-dark); }

/* Reassurance row */
.cc-pkg-reassure { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; font-size: 13px; color: var(--muted); }
.cc-pkg-reassure img { height: 24px; display: block; }
.cc-pkg-dot { color: var(--hair); }

/* ===================== LOGGED-OUT GATE ===================== */
.cc-gate-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.cc-gate-how { background: #fff; border: 1px solid var(--hair); padding: 34px 40px; }
.cc-gate-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; margin: 0 0 6px; font-weight: 400; color: var(--ink); }
.cc-gate-intro { margin: 0 0 18px; font-size: 15px; color: var(--body); line-height: 1.6; }
.cc-gate-step { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--hair); }
.cc-gate-step-num { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--gold); width: 30px; flex: 0 0 auto; }
.cc-gate-step-text { display: flex; flex-direction: column; }
.cc-gate-step-head { font-weight: 700; font-size: 16px; color: var(--ink); }
.cc-gate-step-sub { font-size: 14px; color: var(--muted); line-height: 1.5; }
.cc-gate-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.cc-gate-btn { font-family: 'Bebas Neue', sans-serif; font-size: 21px; letter-spacing: 1.5px; padding: 14px 34px; text-transform: uppercase; }
.cc-gate-btn--gold { background: var(--gold); color: var(--ink); }
.cc-gate-btn--gold:hover { background: var(--gold-hover); color: var(--ink); }
.cc-gate-btn--outline { border: 1px solid var(--ink); color: var(--ink); }
.cc-gate-btn--outline:hover { background: var(--ink); color: #fff; }
.cc-gate-promo { background: var(--ink); padding: 0 0 24px; align-self: start; }
.cc-gate-promo-img { height: 200px; background: var(--dark-hair) center / cover no-repeat; }
.cc-gate-promo-text { padding: 20px 24px 0; }
.cc-gate-promo-head { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: #fff; line-height: 1.1; }
.cc-gate-promo-sub { font-size: 14px; color: var(--dark-muted-a); line-height: 1.6; margin-top: 8px; }

/* ===================== LISTING PREVIEW (redesign10) ===================== */
.cc-preview { background: var(--page); }
.cc-preview-form { margin: 0; }

/* Preview action bar (gold). Non-sticky: the site header is already sticky, so
   a second sticky top bar would overlap it. */
.cc-preview-bar {
	background: var(--gold);
	display: flex; align-items: center; gap: 20px; padding: 14px 56px;
}
.cc-preview-bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cc-preview-tag {
	background: var(--ink); color: var(--dark-text); flex: 0 0 auto;
	font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; padding: 6px 14px;
}
.cc-preview-msg { font-size: 15px; font-weight: 600; color: var(--ink); }
.cc-preview-bar-actions { margin-left: auto; display: flex; gap: 12px; flex: 0 0 auto; }
.cc-preview-btn {
	font-family: 'Bebas Neue', sans-serif; letter-spacing: 1.5px; cursor: pointer;
	font-size: 18px; padding: 10px 22px; border: 0; background: none;
	text-transform: uppercase; white-space: nowrap;
}
.cc-preview-btn--outline { border: 1px solid var(--ink); color: var(--ink); }
.cc-preview-btn--outline:hover { background: var(--ink); color: var(--gold); }
.cc-preview-btn--ink { background: var(--ink); color: var(--dark-text); padding: 10px 24px; }
.cc-preview-btn--ink:hover { background: #000; color: #fff; }
.cc-preview-btn--gold { background: var(--gold); color: var(--ink); }
.cc-preview-btn--gold:hover { background: var(--gold-hover); }
.cc-preview-btn--dark-outline { border: 1px solid #6b675e; color: var(--dark-text); }
.cc-preview-btn--dark-outline:hover { background: #6b675e; color: #fff; }

/* Buyer's view dashed frame */
.cc-preview-frame {
	margin: 28px 56px 0; border: 2px dashed var(--gold); position: relative; background: var(--page);
}
.cc-preview-frame-tag {
	position: absolute; top: -13px; left: 24px; z-index: 2;
	background: var(--gold); color: var(--ink);
	font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 4px 12px;
}
.cc-preview-frame .cc-l-main { padding: 36px 34px 50px; max-width: none; margin: 0; }

/* Disabled buyer CTAs inside the summary */
.cc-cta-group--preview { display: flex; flex-direction: column; gap: 10px; }
.cc-listing--preview .cc-btn--disabled {
	opacity: 0.45; pointer-events: none; cursor: default; user-select: none; text-align: center;
}
.cc-preview-ctanote {
	border: 1px solid var(--gold); background: var(--tint);
	padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--body);
}

/* Pre-submit checklist card */
.cc-preview-check { background: #fff; border: 1px solid var(--hair); padding: 22px 24px; }
.cc-preview-check-h { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--ink); margin-bottom: 10px; }
.cc-preview-check-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--body); line-height: 1.5; }

/* Bottom action band */
.cc-preview-band {
	margin: 28px 56px 60px; background: var(--ink); padding: 28px 34px;
	display: flex; align-items: center; gap: 24px;
}
.cc-preview-band-h { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: #fff; letter-spacing: 0.5px; }
.cc-preview-band-sub { font-size: 13px; color: var(--dark-muted-b); }
.cc-preview-band-actions { margin-left: auto; display: flex; gap: 12px; }

/* Mobile-only fixed bottom action bar */
.cc-preview-mobilebar { display: none; }

/* ===================== SUBMISSION DONE ===================== */
.cc-done { background: var(--page); }
.cc-done-inner {
	max-width: 640px; margin: 0 auto; padding: 80px 20px 90px;
	display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cc-done-check {
	width: 64px; height: 64px; flex: 0 0 auto; margin-bottom: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--gold); color: var(--ink); font-size: 34px; line-height: 1;
}
.cc-done-title {
	font-family: 'Bebas Neue', sans-serif; font-weight: 400;
	font-size: 56px; line-height: 0.95; color: var(--ink); margin: 0 0 16px;
}
.cc-done-sub { font-size: 17px; line-height: 1.6; color: var(--body); margin: 0 0 32px; max-width: 520px; }
.cc-done-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cc-done-btn {
	font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase;
	padding: 14px 30px; border: 1px solid transparent; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.cc-done a.cc-done-btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.cc-done a.cc-done-btn--gold:hover { background: var(--gold-hover); color: var(--ink); }
.cc-done a.cc-done-btn--outline { background: none; border-color: var(--ink); color: var(--ink); }
.cc-done a.cc-done-btn--outline:hover { background: var(--ink); color: #fff; }
.cc-done-again { margin-top: 26px; font-size: 14px; font-weight: 600; color: var(--gold); }
.cc-done-again:hover { color: var(--gold-hover-dark); }

/* ============================ MOBILE ============================ */
@media (max-width: 900px) {
	.cc-submit-hero { padding: 28px 20px; }
	.cc-submit-hero-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
	.cc-submit-hero-title { font-size: 36px; }
	.cc-submit-steps { margin-left: 0; flex-wrap: wrap; gap: 8px; }
	.cc-submit-step-num { width: 22px; height: 22px; font-size: 13px; }
	.cc-submit-step-bar { width: 14px; }

	.cc-submit-body { padding: 24px 16px 40px; }
	.cc-submit .before-group-row-inner { padding: 20px 16px; }
	.cc-submit .before-group-row.columns-3 .before-group-row-inner { grid-template-columns: 1fr 1fr; }
	.cc-submit .cmb2-metabox-title { font-size: 26px; }

	.cc-submit-bar { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 18px; }
	.cc-submit-bar-actions { margin-left: 0; }
	.cc-submit-go { width: 100%; }
	.cc-submit .upload-file-btn { min-width: 0; width: 100%; }

	.cc-pkg-card { padding: 20px 16px; }
	.cc-pkg-heading { font-size: 26px; }
	.cc-credits-grid { grid-template-columns: 1fr; }
	.cc-credit-actions { flex-direction: column; align-items: stretch; }
	.cc-credit-publish { width: 100%; }
	.cc-buy-grid { grid-template-columns: 1fr; }
	.cc-buy-card.is-featured { order: -1; } /* recommended reads first on mobile */

	.cc-gate-grid { grid-template-columns: 1fr; }
	.cc-gate-how { padding: 20px 16px; }
	.cc-gate-actions { flex-direction: column; }
	.cc-gate-btn { text-align: center; }

	/* Preview: top banner without buttons, actions move to a fixed bottom bar. */
	.cc-preview { padding-bottom: 76px; }
	.cc-preview-bar { padding: 12px 16px; gap: 12px; }
	.cc-preview-tag { font-size: 15px; }
	.cc-preview-msg { font-size: 12px; }
	.cc-preview-bar-actions { display: none; }
	.cc-preview-frame { margin: 16px 10px 0; }
	.cc-preview-frame .cc-l-main { padding: 16px 12px 24px; }
	.cc-preview-band { margin: 20px 10px; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; }
	.cc-preview-band-actions { margin-left: 0; }
	.cc-preview-mobilebar {
		display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
		background: var(--ink); padding: 12px 16px;
	}
	.cc-preview-mobilebar .cc-preview-btn { width: 100%; text-align: center; padding: 12px 8px; }

	.cc-done-inner { padding: 50px 16px 60px; }
	.cc-done-title { font-size: 40px; }
	.cc-done-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
	.cc-done-btn { width: 100%; }
}