/* MC Marked theme – motorsport-inspired dark & bold visual design layer.
   Re-skins the plugin's own CSS custom properties (defined in
   mcmarked/assets/css/frontend.css) so every plugin-rendered element
   (cards, buttons, forms, badges) automatically matches this theme's dark
   palette, plus the theme's own header/footer/homepage. */

:root {
	/* Re-skin the plugin's variables for a dark surface. */
	--mc-primary: #ff3b30;
	--mc-primary-dark: #d92b21;
	--mc-ink: #f2f3f5;
	--mc-muted: #9aa0ab;
	--mc-border: #2a2d35;
	--mc-bg-soft: #1a1c22;
	--mc-radius: 8px;

	--mct-bg: #0d0e12;
	--mct-surface: #16171d;
	--mct-surface-2: #1e2028;
	--mct-accent: #ff3b30;
	--mct-accent-2: #ffb020;
	--mct-header-h: 74px;
}

* { box-sizing: border-box; }

body {
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--mc-ink);
	background: var(--mct-bg);
	margin: 0;
	line-height: 1.5;
}
h1, h2, h3, h4 {
	font-family: 'Rajdhani', 'Barlow', sans-serif;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 .5em;
	text-transform: uppercase;
	letter-spacing: .01em;
}
a { color: var(--mct-accent); }
img { max-width: 100%; height: auto; }

/* -----------------------------------------------------------
   Dark re-skin of plugin surfaces (the plugin's own CSS hardcodes
   white backgrounds for cards/forms/tables, so the theme overrides
   those explicitly here to keep everything on the dark palette).
   ----------------------------------------------------------- */
.mc-search-form,
.mc-card,
.mc-table,
.mc-auth-form,
.mc-contact-box,
.mc-seller-box,
.mc-message,
.mc-submit-form-wrap,
.mc-credit-package,
.mc-loan-calculator,
.mc-compare-table,
.mc-loan-result,
.mc-notice {
	background: var(--mct-surface);
	border-color: var(--mc-border);
	color: var(--mc-ink);
}
.mc-table th, .mc-compare-table thead th, .mc-compare-table tbody th {
	background: var(--mct-surface-2);
}
.mc-card-media, .mc-gallery-main { background: var(--mct-surface-2); }
.mc-notice-success { background: #113322; border-color: #1f5c3a; color: #6fd89a; }
.mc-notice-error { background: #3a1418; border-color: #6b232c; color: #ff8a94; }
.mc-notice-warning { background: #3a2c10; border-color: #6b511c; color: #ffcd6b; }
.mc-notice-info { background: #10233a; border-color: #1c3d6b; color: #7fb3ff; }
.mc-field input[type=text], .mc-field input[type=number], .mc-field select,
.mc-contact-form input, .mc-contact-form textarea,
.mc-auth-form input, .mc-auth-form textarea,
.mc-profile-form input, .mc-profile-form textarea,
.mc-submit-form-wrap input:not([type=checkbox]):not([type=radio]), .mc-submit-form-wrap textarea, .mc-submit-form-wrap select {
	background: var(--mct-surface-2); color: var(--mc-ink); border-color: var(--mc-border);
}
.mc-fav-btn { background: rgba(20,21,26,.85); color: var(--mc-ink); }
.mc-compare-toggle { background: rgba(20,21,26,.85); color: var(--mc-ink); }
.mc-btn-secondary { background: var(--mct-surface-2); color: var(--mc-ink); border-color: var(--mc-border); }
.mc-address-results ul { background: var(--mct-surface-2); }
.mc-address-results li:hover { background: var(--mct-surface); }
.mc-dashboard-tabs { border-color: var(--mc-border); }
.mc-checklist-grid, .mc-service-history, .mc-loan-result { background: var(--mct-surface-2); }
.mc-credits-balance { background: var(--mct-surface-2); }
.mc-dropzone { background: transparent; }
.mc-dropzone.is-dragover { background: var(--mct-surface-2); }

/* Re-skin the plugin's primary buttons/badges to the theme's racing-red accent for CTAs */
.mc-btn-primary, .mct-btn-primary { background: var(--mct-accent); border-color: var(--mct-accent); }
.mc-btn-primary:hover, .mct-btn-primary:hover { background: var(--mc-primary-dark); border-color: var(--mc-primary-dark); }
.mc-badge-dealer { background: #3a1418; color: #ff8a94; }

/* -----------------------------------------------------------
   Header
   ----------------------------------------------------------- */
.mct-header { background: var(--mct-surface); border-bottom: 2px solid var(--mct-accent); position: sticky; top: 0; z-index: 50; }
.mct-header-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: var(--mct-header-h); display: flex; align-items: center; gap: 24px; }
.mct-logo { display: flex; align-items: center; text-decoration: none; }
.mct-logo-text { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .03em; color: #fff; display: flex; align-items: center; gap: 8px; }
.mct-primary-nav { flex: 1; }
.mct-menu { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; align-items: center; }
.mct-menu li a { display: inline-flex; align-items: center; padding: 9px 14px; text-decoration: none; color: var(--mc-ink); font-weight: 600; font-size: 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: .02em; }
.mct-menu li a:hover { background: var(--mct-surface-2); }
.mct-menu li a.mct-btn, .mct-menu li:last-child a { background: var(--mct-accent); color: #fff; }
.mct-menu li:last-child a:hover { background: var(--mc-primary-dark); }
.mct-auth-links { display: flex; gap: 6px; align-items: center; }
.mct-nav-link { text-decoration: none; font-weight: 600; font-size: 14px; padding: 9px 12px; border-radius: 6px; color: var(--mc-ink); text-transform: uppercase; letter-spacing: .02em; }
.mct-nav-link:hover { background: var(--mct-surface-2); }
.mct-menu-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; }
.mct-menu-toggle span { width: 22px; height: 2px; background: #fff; display: block; }

/* -----------------------------------------------------------
   Hero – bold diagonal "speed stripe" motorsport look
   ----------------------------------------------------------- */
.mct-hero {
	background:
		linear-gradient(115deg, transparent 0%, transparent 55%, rgba(255,59,48,.12) 55%, rgba(255,59,48,.12) 58%, transparent 58%),
		radial-gradient(circle at 20% 20%, rgba(255,59,48,.18), transparent 45%),
		linear-gradient(160deg, #17181f 0%, #0d0e12 100%);
	color: #fff;
	padding: 72px 20px 96px;
	text-align: center;
	border-bottom: 1px solid var(--mc-border);
}
.mct-hero-inner { max-width: 860px; margin: 0 auto; }
.mct-hero h1 { font-size: clamp(30px, 4.5vw, 48px); color: #fff; margin-bottom: 14px; }
.mct-hero p { font-size: 17px; color: rgba(255,255,255,.72); max-width: 580px; margin: 0 auto 32px; text-transform: none; }
.mct-hero-search { margin-bottom: 20px; }
.mct-hero-search .mc-search-form { text-align: left; box-shadow: 0 24px 48px rgba(0,0,0,.5); }
.mct-hero-cta { display: inline-block; margin-top: 4px; color: var(--mct-accent-2); text-decoration: underline; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.mct-hero-cta:hover { color: #fff; }

/* -----------------------------------------------------------
   Sections shared across homepage
   ----------------------------------------------------------- */
.mct-section { padding: 56px 0; }
.mct-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.mct-section h2 { font-size: 26px; }

.mct-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.mct-value-card { background: var(--mct-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius); padding: 28px 22px; text-align: center; border-top: 3px solid var(--mct-accent); }
.mct-value-icon { font-size: 34px; display: block; margin-bottom: 12px; }
.mct-value-card h3 { font-size: 16px; margin-bottom: 8px; }
.mct-value-card p { color: var(--mc-muted); font-size: 14px; margin: 0; text-transform: none; }

.mct-featured { background: var(--mct-surface); border-top: 1px solid var(--mc-border); border-bottom: 1px solid var(--mc-border); }

.mct-brand-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.mct-brand-pill { background: var(--mct-surface); border: 1px solid var(--mc-border); padding: 10px 18px; border-radius: 100px; text-decoration: none; color: var(--mc-ink); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.mct-brand-pill:hover { border-color: var(--mct-accent); color: var(--mct-accent); }

.mct-cta-band { background: linear-gradient(120deg, #2b0d0a, #0d0e12); color: #fff; padding: 48px 0; border-top: 2px solid var(--mct-accent); }
.mct-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.mct-cta-inner h2 { color: #fff; font-size: 24px; margin-bottom: 6px; }
.mct-cta-inner p { margin: 0; color: rgba(255,255,255,.75); text-transform: none; }
.mct-btn { display: inline-flex; padding: 12px 26px; border-radius: 100px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .02em; }
.mct-btn-light { background: #fff; color: var(--mct-bg); }
.mct-btn-light:hover { background: var(--mct-accent-2); }

/* -----------------------------------------------------------
   Generic page wrapper (login/register/dashboard/etc.)
   ----------------------------------------------------------- */
.mct-page { padding-top: 40px; padding-bottom: 64px; }
.mct-page-title { font-size: 28px; margin-bottom: 24px; }
.mct-post-preview { border-bottom: 1px solid var(--mc-border); padding-bottom: 20px; margin-bottom: 20px; }

/* -----------------------------------------------------------
   Footer
   ----------------------------------------------------------- */
.mct-footer { background: #08090b; color: rgba(255,255,255,.75); margin-top: 40px; border-top: 2px solid var(--mct-accent); }
.mct-footer-inner { max-width: 1180px; margin: 0 auto; padding: 48px 20px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.mct-footer-col h3 { color: #fff; font-size: 15px; margin-bottom: 14px; }
.mct-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mct-footer-col a, .mct-footer-menu a { color: rgba(255,255,255,.7); text-decoration: none; font-size: 14px; }
.mct-footer-col a:hover { color: var(--mct-accent-2); }
.mct-footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mct-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 20px; text-align: center; font-size: 13px; }
.mct-footer-bottom p { margin: 0; }

/* -----------------------------------------------------------
   Responsive
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.mct-value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
	.mct-value-grid { grid-template-columns: 1fr; }
	.mct-footer-inner { grid-template-columns: 1fr; }
	.mct-primary-nav, .mct-auth-links { display: none; }
	body.mct-menu-open .mct-primary-nav,
	body.mct-menu-open .mct-auth-links {
		display: flex; position: absolute; top: var(--mct-header-h); left: 0; right: 0; background: var(--mct-surface);
		flex-direction: column; padding: 12px 20px; border-bottom: 1px solid var(--mc-border);
	}
	body.mct-menu-open .mct-menu { flex-direction: column; align-items: stretch; width: 100%; }
	.mct-menu-toggle { display: flex; margin-left: auto; }
}