/**
 * MERCH Custom Design - Frontend Stylesheet v2.0.0
 * Primary: rgb(191, 249, 35) (#bff923) | Secondary: rgb(21, 21, 21) (#151515)
 * Modern Luxury Aesthetics, High Contrast Typography (WCAG AAA), RTL Arabic
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   CSS Custom Properties (Theme Colors)
   ========================================================================== */
:root,
.mcd-customizer-container,
.mcd-account-portal,
.mcd-tracking-box {
	--mcd-primary: rgb(191, 249, 35);
	--mcd-primary-rgb: 191, 249, 35;
	--mcd-primary-hover: #d4fc6a;
	--mcd-secondary: rgb(21, 21, 21);
	--mcd-secondary-rgb: 21, 21, 21;
	--mcd-text-main: #151515;
	--mcd-text-muted: #52525b;
	--mcd-text-hint: #71717a;
	--mcd-border-color: #e4e4e7;
	--mcd-surface-bg: #ffffff;
	--mcd-subtle-bg: #f9fafb;
}

/* ==========================================================================
   Container & Reset
   ========================================================================== */
.mcd-customizer-container,
.mcd-account-portal,
.mcd-tracking-box {
	direction: rtl !important;
	text-align: right !important;
	font-family: 'Noto Kufi Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	box-sizing: border-box !important;
	color: #151515 !important;
	margin: 25px auto !important;
	max-width: 920px !important;
	background: transparent !important;
}

.mcd-customizer-container *,
.mcd-account-portal *,
.mcd-tracking-box * {
	box-sizing: border-box !important;
}

/* ==========================================================================
   Header Box (Clean Surface & Modern Accents)
   ========================================================================== */
.mcd-header-box {
	text-align: center !important;
	margin-bottom: 25px !important;
	padding: 38px 25px !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border-radius: 16px !important;
	border: 1px solid #e4e4e7 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
	position: relative !important;
	overflow: hidden !important;
}

.mcd-header-box::before {
	content: '' !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 4px !important;
	background: linear-gradient(90deg, #151515 0%, rgb(191, 249, 35) 50%, #151515 100%) !important;
}

.mcd-gold-badge {
	display: inline-block !important;
	background: #151515 !important;
	color: rgb(191, 249, 35) !important;
	border: 1px solid #151515 !important;
	padding: 5px 18px !important;
	border-radius: 30px !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 1.5px !important;
	margin-bottom: 14px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.mcd-title {
	color: #151515 !important;
	font-size: 30px !important;
	font-weight: 800 !important;
	margin: 0 0 10px 0 !important;
	letter-spacing: -0.5px !important;
}

.mcd-subtitle {
	color: #52525b !important;
	font-size: 15px !important;
	max-width: 650px !important;
	margin: 0 auto !important;
	line-height: 1.8 !important;
	font-weight: 500 !important;
}

/* ==========================================================================
   Sections & Cards (Pure White with Crisp Shadows)
   ========================================================================== */
.mcd-card-section {
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1px solid #e4e4e7 !important;
	border-radius: 14px !important;
	padding: 30px !important;
	margin-bottom: 25px !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
	transition: all 0.3s ease !important;
}

.mcd-card-section:hover,
.mcd-card-section:focus-within {
	border-color: #151515 !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 1px rgb(191, 249, 35) !important;
}

.mcd-section-header {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
	padding-bottom: 16px !important;
	border-bottom: 1.5px solid #f4f4f5 !important;
}

.mcd-step-num {
	width: 42px !important;
	height: 42px !important;
	background: #151515 !important;
	border: 1.5px solid rgb(191, 249, 35) !important;
	color: rgb(191, 249, 35) !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	flex-shrink: 0 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.mcd-step-info {
	flex-grow: 1 !important;
}

.mcd-step-title {
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #151515 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.mcd-step-desc {
	display: block !important;
	color: #52525b !important;
	font-size: 13px !important;
	margin-top: 3px !important;
	font-weight: 500 !important;
}

/* ==========================================================================
   Form Fields & Grid
   ========================================================================== */
.mcd-grid-2 {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 22px !important;
}

.mcd-col-full {
	grid-column: 1 / -1 !important;
}

@media (max-width: 680px) {
	.mcd-grid-2 {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.mcd-card-section {
		padding: 20px 16px !important;
	}
}

.mcd-field-group {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

.mcd-label {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #151515 !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
}

.mcd-required {
	color: #dc2626 !important;
	font-weight: 800 !important;
}

.mcd-input,
.mcd-select,
.mcd-textarea {
	width: 100% !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: 1.5px solid #d4d4d8 !important;
	color: #151515 !important;
	padding: 14px 18px !important;
	min-height: 52px !important;
	border-radius: 9px !important;
	font-family: inherit !important;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	transition: all 0.25s ease !important;
	outline: none !important;
	box-sizing: border-box !important;
}

.mcd-select {
	min-height: 54px !important;
	height: auto !important;
	padding-top: 13px !important;
	padding-bottom: 13px !important;
	cursor: pointer !important;
}

#mcd_print_location {
	min-height: 56px !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	padding: 14px 18px !important;
}

.mcd-input::placeholder,
.mcd-textarea::placeholder {
	color: #a1a1aa !important;
}

.mcd-input:focus,
.mcd-select:focus,
.mcd-textarea:focus {
	border-color: #151515 !important;
	box-shadow: 0 0 0 3px rgba(191, 249, 35, 0.45) !important;
	background: #ffffff !important;
}

.mcd-input-hint {
	font-size: 12px !important;
	color: #71717a !important;
	margin-top: 6px !important;
	display: block !important;
}

/* ==========================================================================
   Logged-in User Badge & Guest Account Creation
   ========================================================================== */
.mcd-logged-in-badge {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	background: #f9fafb !important;
	border: 1.5px solid #e4e4e7 !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	margin-bottom: 22px !important;
	position: relative !important;
}

.mcd-logged-in-badge::before {
	content: '' !important;
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	width: 4px !important;
	background: rgb(191, 249, 35) !important;
	border-radius: 0 12px 12px 0 !important;
}

.mcd-logged-in-icon {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	border-radius: 50% !important;
	background: #151515 !important;
	color: rgb(191, 249, 35) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mcd-logged-in-text {
	flex: 1 !important;
}

.mcd-logged-in-name {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-size: 15px !important;
	color: #151515 !important;
	font-weight: 700 !important;
}

.mcd-user-role-badge {
	display: inline-block !important;
	background: #151515 !important;
	color: rgb(191, 249, 35) !important;
	padding: 2px 10px !important;
	border-radius: 20px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
}

.mcd-logged-in-email {
	display: block !important;
	color: #71717a !important;
	font-size: 13px !important;
	direction: ltr !important;
	text-align: right !important;
	margin-top: 2px !important;
}

.mcd-logged-in-note {
	margin: 6px 0 0 0 !important;
	color: #52525b !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
}

/* Password Input & Toggle */
.mcd-password-wrap {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
}

.mcd-password-wrap .mcd-password-input {
	padding-left: 48px !important;
	width: 100% !important;
}

.mcd-password-toggle {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: transparent !important;
	border: none !important;
	padding: 6px !important;
	cursor: pointer !important;
	color: #71717a !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 6px !important;
	transition: color 0.2s ease, background-color 0.2s ease !important;
	outline: none !important;
	z-index: 15 !important;
}

.mcd-password-toggle svg {
	pointer-events: none !important;
}

.mcd-password-toggle:hover {
	color: #151515 !important;
	background: #f4f4f5 !important;
}

.mcd-field-hint {
	display: block !important;
	color: #71717a !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	margin-top: 4px !important;
}

.mcd-guest-login-hint {
	margin-top: 18px !important;
	padding-top: 14px !important;
	border-top: 1px dashed #e4e4e7 !important;
	font-size: 13px !important;
	color: #52525b !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

.mcd-login-link {
	color: #151515 !important;
	font-weight: 800 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	transition: color 0.2s ease !important;
}

.mcd-login-link:hover {
	color: #000000 !important;
	text-decoration: none !important;
}


/* ==========================================================================
   Season Selector (Summer / Winter Cards)
   ========================================================================== */
.mcd-season-options {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 10px !important;
}

.mcd-season-option-label {
	position: relative !important;
	display: flex !important;
	cursor: pointer !important;
	margin: 0 !important;
}

.mcd-season-option-label input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	pointer-events: none !important;
}

.mcd-season-card-ui {
	width: 100% !important;
	min-height: 48px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 10px 14px !important;
	background: #ffffff !important;
	border: 1.5px solid #d4d4d8 !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #151515 !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	user-select: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.mcd-season-icon {
	font-size: 18px !important;
	line-height: 1 !important;
	transition: transform 0.2s ease !important;
}

.mcd-season-option-label:hover .mcd-season-card-ui {
	border-color: #151515 !important;
	background: #fbfbfb !important;
	transform: translateY(-1px) !important;
}

.mcd-season-option-label input[type="radio"]:checked + .mcd-season-card-ui {
	background: #151515 !important;
	border-color: #151515 !important;
	color: rgb(191, 249, 35) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

.mcd-season-option-label input[type="radio"]:checked + .mcd-season-card-ui .mcd-season-icon {
	transform: scale(1.15) !important;
}

.mcd-season-option-label input[type="radio"]:focus-visible + .mcd-season-card-ui {
	outline: 2px solid rgb(191, 249, 35) !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   Color Swatches & Custom Color
   ========================================================================== */
.mcd-color-swatches {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 8px !important;
	align-items: center !important;
}

.mcd-color-swatch {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	border: 2px solid #e4e4e7 !important;
	cursor: pointer !important;
	position: relative !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	outline: none !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

.mcd-color-swatch:hover {
	transform: scale(1.12) !important;
	border-color: #151515 !important;
}

.mcd-color-swatch.is-active {
	border-color: #151515 !important;
	box-shadow: 0 0 0 3px rgb(191, 249, 35) !important;
	transform: scale(1.15) !important;
}

.mcd-swatch-custom {
	background: #f9fafb !important;
	border: 2px dashed #151515 !important;
	color: #151515 !important;
}

.mcd-swatch-custom:hover {
	background: #ffffff !important;
	border-color: #151515 !important;
	border-style: solid !important;
}

.mcd-swatch-custom.is-active {
	background: #ffffff !important;
	border-style: solid !important;
	border-color: #151515 !important;
	box-shadow: 0 0 0 3px rgb(191, 249, 35) !important;
}

.mcd-swatch-check {
	display: none !important;
	width: 14px !important;
	height: 14px !important;
	color: #ffffff !important;
}

.mcd-color-swatch.is-active .mcd-swatch-check {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* صندوق إدخال اللون المخصص الاحترافي */
.mcd-custom-color-container {
	margin-top: 14px !important;
}

.mcd-custom-color-toggle-btn {
	background: none !important;
	border: none !important;
	color: #151515 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	padding: 4px 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	text-decoration: underline !important;
	font-family: inherit !important;
}

.mcd-custom-color-toggle-btn:hover {
	color: #000000 !important;
}

.mcd-custom-color-box {
	margin-top: 10px !important;
	padding: 16px !important;
	background: #f9fafb !important;
	border: 1.5px solid #e4e4e7 !important;
	border-radius: 12px !important;
}

.mcd-custom-color-row {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}

.mcd-color-picker-wrapper {
	position: relative !important;
	width: 46px !important;
	height: 46px !important;
	flex-shrink: 0 !important;
}

.mcd-native-color-picker {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	opacity: 0 !important;
	cursor: pointer !important;
	z-index: 2 !important;
}

.mcd-color-picker-preview {
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	border: 2px solid #151515 !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
	display: block !important;
	transition: transform 0.2s ease !important;
}

.mcd-color-picker-wrapper:hover .mcd-color-picker-preview {
	transform: scale(1.08) !important;
}

.mcd-custom-color-input {
	flex-grow: 1 !important;
}

.mcd-selected-color-tag {
	font-size: 13px !important;
	color: rgb(191, 249, 35) !important;
	font-weight: 800 !important;
	background: #151515 !important;
	padding: 4px 12px !important;
	border-radius: 12px !important;
	border: 1px solid #151515 !important;
}

/* ==========================================================================
   Drag & Drop Zone (Charcoal & Neon Lime Accents)
   ========================================================================== */
.mcd-dropzone-wrapper {
	background: #fafafa !important;
	background-color: #fafafa !important;
	border: 2px dashed #d4d4d8 !important;
	border-radius: 14px !important;
	padding: 40px 20px !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
}

.mcd-dropzone-wrapper:hover,
.mcd-dropzone-wrapper.is-dragover {
	border-color: rgb(191, 249, 35) !important;
	background: rgba(191, 249, 35, 0.06) !important;
	box-shadow: inset 0 0 20px rgba(191, 249, 35, 0.12) !important;
}

.mcd-file-hidden {
	display: none !important;
}

.mcd-dropzone-icon svg {
	width: 52px !important;
	height: 52px !important;
	color: #151515 !important;
	margin-bottom: 14px !important;
}

.mcd-dropzone-text {
	margin: 0 0 6px 0 !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #151515 !important;
}

.mcd-dropzone-sub {
	margin: 0 0 18px 0 !important;
	font-size: 13px !important;
	color: #52525b !important;
}

.mcd-btn-browse {
	background: #151515 !important;
	border: 1.5px solid #151515 !important;
	color: rgb(191, 249, 35) !important;
	padding: 10px 26px !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.mcd-btn-browse:hover {
	background: rgb(191, 249, 35) !important;
	color: #151515 !important;
	border-color: rgb(191, 249, 35) !important;
	box-shadow: 0 4px 14px rgba(191, 249, 35, 0.4) !important;
}

/* ==========================================================================
   Uploaded Files Preview Grid
   ========================================================================== */
.mcd-files-preview-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
	gap: 15px !important;
	margin-top: 18px !important;
}

.mcd-preview-item {
	background: #ffffff !important;
	border: 1px solid #e4e4e7 !important;
	border-radius: 10px !important;
	padding: 10px !important;
	position: relative !important;
	text-align: center !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.04) !important;
}

.mcd-preview-thumb {
	width: 100% !important;
	height: 85px !important;
	object-fit: cover !important;
	border-radius: 7px !important;
	margin-bottom: 6px !important;
	background: #f4f4f5 !important;
}

.mcd-preview-pdf-icon {
	width: 100% !important;
	height: 85px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fef2f2 !important;
	border-radius: 7px !important;
	margin-bottom: 6px !important;
	color: #dc2626 !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	border: 1px solid #fecaca !important;
}

.mcd-preview-name {
	display: block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #151515 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.mcd-preview-size {
	display: block !important;
	font-size: 11px !important;
	color: #71717a !important;
}

.mcd-preview-remove {
	position: absolute !important;
	top: -7px !important;
	left: -7px !important;
	background: #ef4444 !important;
	color: #ffffff !important;
	border: 2px solid #ffffff !important;
	border-radius: 50% !important;
	width: 24px !important;
	height: 24px !important;
	line-height: 20px !important;
	text-align: center !important;
	font-size: 14px !important;
	cursor: pointer !important;
	padding: 0 !important;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}

/* ==========================================================================
   Progress Bar
   ========================================================================== */
.mcd-progress-container {
	margin: 24px 0 !important;
	background: #ffffff !important;
	padding: 18px !important;
	border-radius: 10px !important;
	border: 1px solid #e4e4e7 !important;
}

.mcd-progress-header {
	display: flex !important;
	justify-content: space-between !important;
	font-size: 14px !important;
	margin-bottom: 8px !important;
	color: #151515 !important;
	font-weight: 800 !important;
}

.mcd-progress-bar-bg {
	background: #f4f4f5 !important;
	border-radius: 12px !important;
	height: 10px !important;
	overflow: hidden !important;
}

.mcd-progress-bar-fill {
	background: linear-gradient(90deg, #151515 0%, rgb(191, 249, 35) 100%) !important;
	height: 100% !important;
	border-radius: 12px !important;
	transition: width 0.3s ease !important;
	box-shadow: 0 0 12px rgba(191, 249, 35, 0.45) !important;
}

/* ==========================================================================
   Submit Buttons (Primary rgb(191,249,35) with Dark #151515 Text - WCAG AAA)
   ========================================================================== */
.mcd-submit-wrapper {
	text-align: center !important;
	margin-top: 32px !important;
}

.mcd-submit-btn,
.mcd-btn-primary {
	background: rgb(191, 249, 35) !important;
	color: rgb(21, 21, 21) !important;
	border: none !important;
	padding: 16px 42px !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 8px 24px rgba(191, 249, 35, 0.35) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	text-decoration: none !important;
}

.mcd-submit-btn:hover,
.mcd-btn-primary:hover {
	background: #d4fc6a !important;
	color: rgb(21, 21, 21) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 28px rgba(191, 249, 35, 0.5) !important;
}

.mcd-submit-btn:disabled {
	opacity: 0.65 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

.mcd-btn-secondary {
	background: #ffffff !important;
	color: #151515 !important;
	border: 1.5px solid #d4d4d8 !important;
	padding: 10px 22px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: all 0.2s !important;
}

.mcd-btn-secondary:hover {
	background: #151515 !important;
	border-color: #151515 !important;
	color: rgb(191, 249, 35) !important;
}

.mcd-security-guarantee {
	font-size: 13px !important;
	color: #52525b !important;
	margin-top: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

.mcd-security-guarantee svg {
	width: 16px !important;
	height: 16px !important;
	color: #151515 !important;
}

.mcd-btn-spinner {
	width: 20px !important;
	height: 20px !important;
	border: 3px solid rgba(21, 21, 21, 0.25) !important;
	border-top-color: #151515 !important;
	border-radius: 50% !important;
	animation: mcd-spin 0.8s linear infinite !important;
	display: none !important;
	vertical-align: middle !important;
	margin-right: 8px !important;
}

.mcd-btn-spinner.is-visible,
.mcd-submit-btn.is-loading .mcd-btn-spinner,
button.is-loading .mcd-btn-spinner {
	display: inline-block !important;
}

@keyframes mcd-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Alerts & Notifications
   ========================================================================== */
.mcd-alert {
	padding: 16px 20px !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	margin-bottom: 22px !important;
	line-height: 1.7 !important;
	font-weight: 600 !important;
	display: flex;
	align-items: center !important;
	gap: 10px !important;
}

.mcd-alert:empty,
.mcd-alert[style*="display: none"],
.mcd-alert[style*="display:none"],
.mcd-alert.is-hidden {
	display: none !important;
}

.mcd-alert-error {
	background: #fef2f2 !important;
	border: 1.5px solid #ef4444 !important;
	color: #991b1b !important;
}

.mcd-alert-success {
	background: #f0fdf4 !important;
	border: 1.5px solid #10b981 !important;
	color: #065f46 !important;
}

.mcd-alert-warning {
	background: #fffbeb !important;
	border: 1.5px solid #f59e0b !important;
	color: #92400e !important;
}

.mcd-alert-info {
	background: #eff6ff !important;
	border: 1.5px solid #3b82f6 !important;
	color: #1e40af !important;
}

/* ==========================================================================
   Success Screen
   ========================================================================== */
.mcd-success-screen {
	background: #ffffff !important;
	border: 2px solid rgb(191, 249, 35) !important;
	border-radius: 16px !important;
	padding: 45px 30px !important;
	text-align: center !important;
	margin: 20px 0 !important;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08) !important;
}

.mcd-success-icon-wrap {
	width: 75px !important;
	height: 75px !important;
	background: #151515 !important;
	border: 2px solid rgb(191, 249, 35) !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 20px auto !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.mcd-success-icon {
	width: 44px !important;
	height: 44px !important;
	color: rgb(191, 249, 35) !important;
}

.mcd-success-title {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: #151515 !important;
	margin: 0 0 10px 0 !important;
}

.mcd-success-desc {
	color: #52525b !important;
	font-size: 15px !important;
	margin: 0 0 18px 0 !important;
}

.mcd-ref-display {
	display: inline-block !important;
	background: #151515 !important;
	border: 2px dashed rgb(191, 249, 35) !important;
	color: rgb(191, 249, 35) !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	padding: 12px 30px !important;
	border-radius: 10px !important;
	letter-spacing: 1.5px !important;
	margin-bottom: 22px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mcd-success-next-steps {
	color: #52525b !important;
	font-size: 14px !important;
	max-width: 600px !important;
	margin: 0 auto 28px auto !important;
	line-height: 1.8 !important;
}

.mcd-success-actions {
	display: flex !important;
	gap: 14px !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}

.mcd-btn-reset {
	background: #ffffff !important;
	color: #151515 !important;
	border: 1.5px solid #d4d4d8 !important;
	padding: 14px 28px !important;
	border-radius: 9px !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
}

.mcd-btn-reset:hover {
	background: #151515 !important;
	border-color: #151515 !important;
	color: rgb(191, 249, 35) !important;
}

/* ==========================================================================
   Customer Account Portal Styles
   ========================================================================== */
.mcd-portal-header {
	margin-bottom: 25px !important;
	border-bottom: 2px solid #e4e4e7 !important;
	padding-bottom: 18px !important;
}

.mcd-portal-title {
	font-size: 26px !important;
	font-weight: 800 !important;
	color: #151515 !important;
	margin: 0 0 8px 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.mcd-portal-subtitle {
	color: #52525b !important;
	font-size: 15px !important;
	margin: 0 !important;
}

.mcd-empty-state {
	background: #ffffff !important;
	border: 2px dashed #d4d4d8 !important;
	border-radius: 14px !important;
	padding: 55px 25px !important;
	text-align: center !important;
}

.mcd-empty-icon svg {
	width: 58px !important;
	height: 58px !important;
	color: #151515 !important;
	margin-bottom: 16px !important;
}

.mcd-order-card {
	background: #ffffff !important;
	border: 1px solid #e4e4e7 !important;
	border-radius: 12px !important;
	margin-bottom: 22px !important;
	padding: 24px !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.03) !important;
	transition: all 0.25s ease !important;
}

.mcd-order-card:hover {
	border-color: #151515 !important;
	box-shadow: 0 6px 22px rgba(0,0,0,0.06) !important;
}

.mcd-card-top-bar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-bottom: 1px solid #f4f4f5 !important;
	padding-bottom: 14px !important;
	margin-bottom: 16px !important;
}

.mcd-card-ref {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: #151515 !important;
	letter-spacing: 0.5px !important;
}

.mcd-card-date {
	font-size: 13px !important;
	color: #71717a !important;
	margin-right: 12px !important;
}

.mcd-badge-status {
	padding: 5px 14px !important;
	border-radius: 20px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	border: 1px solid transparent !important;
	display: inline-block !important;
}

.mcd-card-summary {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 18px !important;
	margin-bottom: 16px !important;
}

@media (max-width: 640px) {
	.mcd-card-summary {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
}

.mcd-sum-label {
	display: block !important;
	font-size: 12px !important;
	color: #71717a !important;
	margin-bottom: 2px !important;
}

.mcd-sum-val {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #151515 !important;
}

.mcd-price-highlight {
	color: #059669 !important;
	font-weight: 800 !important;
	font-size: 17px !important;
}

.mcd-toggle-details-btn {
	width: 100% !important;
	background: #f9fafb !important;
	border: 1px solid #e4e4e7 !important;
	color: #151515 !important;
	padding: 10px 14px !important;
	border-radius: 8px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	transition: all 0.2s !important;
}

.mcd-toggle-details-btn:hover {
	background: #151515 !important;
	color: rgb(191, 249, 35) !important;
	border-color: #151515 !important;
}

.mcd-details-drawer {
	margin-top: 20px !important;
	padding-top: 20px !important;
	border-top: 1px solid #f4f4f5 !important;
}

.mcd-specs-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
	gap: 12px !important;
	margin-bottom: 18px !important;
}

@media (max-width: 640px) {
	.mcd-specs-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.mcd-spec-box {
	background: #f9fafb !important;
	padding: 12px !important;
	border-radius: 8px !important;
	border: 1px solid #e4e4e7 !important;
}

.mcd-spec-title {
	display: block !important;
	font-size: 11px !important;
	color: #71717a !important;
	margin-bottom: 3px !important;
}

.mcd-spec-data {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #151515 !important;
}

.mcd-notes-block {
	background: #f9fafb !important;
	padding: 14px !important;
	border-radius: 8px !important;
	margin-bottom: 18px !important;
	font-size: 14px !important;
	color: #3f3f46 !important;
	border: 1px solid #e4e4e7 !important;
}

.mcd-files-pills {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 10px !important;
	margin-top: 8px !important;
}

.mcd-file-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #f9fafb !important;
	border: 1px solid #e4e4e7 !important;
	padding: 6px 14px !important;
	border-radius: 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.mcd-mini-thumb {
	width: 24px !important;
	height: 24px !important;
	border-radius: 4px !important;
	object-fit: cover !important;
}

.mcd-pill-download {
	color: #151515 !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	transition: color 0.2s !important;
}

.mcd-pill-download:hover {
	color: #000000 !important;
}

/* ==========================================================================
   Quotation Card in Account (Obsidian Charcoal & Neon Lime Highlight)
   ========================================================================== */
.mcd-quote-review-card {
	background: #ffffff !important;
	border: 2px solid #151515 !important;
	border-radius: 12px !important;
	padding: 24px !important;
	margin-top: 22px !important;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

.mcd-quote-header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	border-bottom: 1px solid #e4e4e7 !important;
	padding-bottom: 14px !important;
	margin-bottom: 18px !important;
}

.mcd-quote-amount {
	font-size: 24px !important;
	font-weight: 900 !important;
	color: #151515 !important;
	background: rgb(191, 249, 35) !important;
	padding: 4px 16px !important;
	border-radius: 8px !important;
	display: inline-block !important;
	letter-spacing: 0.5px !important;
}

.mcd-quote-details-list {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 14px !important;
	font-size: 14px !important;
	margin-bottom: 20px !important;
}

.mcd-qd-full {
	grid-column: 1 / -1 !important;
}

.mcd-action-buttons {
	display: flex !important;
	gap: 14px !important;
	margin-top: 18px !important;
}

@media (max-width: 640px) {
	.mcd-action-buttons {
		flex-direction: column !important;
	}
}

.mcd-btn-approve {
	flex: 1 !important;
	background: rgb(191, 249, 35) !important;
	color: rgb(21, 21, 21) !important;
	border: none !important;
	padding: 13px 22px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-shadow: 0 4px 14px rgba(191, 249, 35, 0.4) !important;
}

.mcd-btn-approve:hover {
	background: #d4fc6a !important;
	color: rgb(21, 21, 21) !important;
	box-shadow: 0 6px 18px rgba(191, 249, 35, 0.5) !important;
}

.mcd-btn-reject {
	background: #ffffff !important;
	color: #dc2626 !important;
	border: 1.5px solid #dc2626 !important;
	padding: 13px 22px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

.mcd-btn-reject:hover {
	background: #fef2f2 !important;
}

.mcd-lock-notice {
	font-size: 12px !important;
	color: #71717a !important;
	margin: 12px 0 0 0 !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

.mcd-under-review-notice {
	background: #fffbeb !important;
	border-right: 4px solid #f59e0b !important;
	padding: 16px !important;
	border-radius: 8px !important;
	margin-top: 18px !important;
}

.mcd-tracking-box {
	background: #ffffff !important;
	border: 1px solid #e4e4e7 !important;
	border-radius: 14px !important;
	padding: 35px 25px !important;
	box-shadow: 0 6px 20px rgba(0,0,0,0.04) !important;
}

/* ==========================================================================
   Decision Alert Boxes (Customer Portal)
   ========================================================================== */
.mcd-decision-alert {
	display: flex !important;
	align-items: flex-start !important;
	gap: 14px !important;
	padding: 16px 18px !important;
	border-radius: 10px !important;
	margin-top: 15px !important;
}

.mcd-decision-alert.mcd-alert-cod {
	background: #f0f9ff !important;
	border: 1.5px solid #0284c7 !important;
	color: #0369a1 !important;
}

.mcd-decision-alert.mcd-alert-success {
	background: #ecfdf5 !important;
	border: 1.5px solid #10b981 !important;
	color: #065f46 !important;
}

.mcd-decision-alert.mcd-alert-warning {
	background: #fffbeb !important;
	border: 1.5px solid #f59e0b !important;
	color: #92400e !important;
}

.mcd-decision-alert.mcd-alert-danger {
	background: #fef2f2 !important;
	border: 1.5px solid #ef4444 !important;
	color: #991b1b !important;
}

.mcd-decision-alert.mcd-alert-info {
	background: #f8fafc !important;
	border: 1.5px solid #cbd5e1 !important;
	color: #334155 !important;
}