/* ==========================================================================
   MyCreaTools Plans - Centered Cards, Bottom #e11417 Buttons & Distinct Borders
   ========================================================================== */

/* Wrapper Container */
.mct-pricing-table-wrapper {
	max-width: 1200px;
	margin: 30px auto;
	padding: 0 15px;
	color: inherit;
}

/* Header Section */
.mct-pricing-header {
	text-align: center;
	margin-bottom: 36px;
}

.mct-pricing-header h2 {
	font-size: 32px;
	font-weight: 800;
	margin: 0 0 10px 0;
	line-height: 1.25;
}

.mct-pricing-header p {
	font-size: 16px;
	color: #64748b;
	margin: 0 auto;
	max-width: 600px;
	line-height: 1.5;
}

/* Alert Notification */
.mct-alert {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-radius: 8px !important;
	margin-bottom: 28px;
	font-weight: 600;
	font-size: 14px;
	box-shadow: none !important;
}

.mct-alert-success {
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.mct-alert-warning {
	background: #fffbe6;
	border: 1px solid #ffe58f;
	color: #d46b08;
}

.mct-alert-icon {
	width: 22px;
	height: 22px;
	background: #10b981;
	color: #ffffff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	flex-shrink: 0;
}

.mct-alert-icon-warning {
	background: #fa8c16 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   Pricing Grid Layout & Cards Centered
   ========================================================================== */
.mct-pricing-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 28px;
	max-width: 1100px;
	margin: 0 auto;
}

.mct-pricing-card {
	flex: 1 1 300px;
	max-width: 380px;
	width: 100%;
	background: #ffffff;
	border: 2px solid #cbd5e1; /* Default standard border */
	border-radius: 12px !important;
	display: flex;
	flex-direction: column;
	position: relative;
	box-shadow: none !important;
	box-sizing: border-box;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.mct-pricing-card:hover {
	box-shadow: none !important;
	transform: none !important;
}

/* Full Width Top Banner Bar */
.mct-card-top-bar {
	width: 100%;
	background: #e11417;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	padding: 8px 12px;
	box-sizing: border-box;
	line-height: 1.3;
}

/* Inner Content Container */
.mct-card-inner {
	padding: 26px 24px 28px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Card Header: Title & Short Subtitle Centered */
.mct-card-head {
	margin-bottom: 16px;
	text-align: center;
}

.mct-plan-name {
	font-size: 24px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px 0;
	letter-spacing: -0.4px;
	text-align: center;
}

.mct-plan-subtitle {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
	text-align: center;
	font-weight: 500;
	line-height: 1.4;
}

/* Price Section Centered */
.mct-card-price-wrap {
	margin-bottom: 24px;
	text-align: center;
}

.mct-card-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

.mct-price-val {
	font-size: 42px;
	font-weight: 900;
	color: #0f172a;
	letter-spacing: -1px;
	line-height: 1;
}

.mct-price-period {
	font-size: 15px;
	color: #64748b;
	font-weight: 500;
}

.mct-savings-tag {
	display: inline-block;
	background: #fef3c7;
	color: #92400e;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 6px !important;
	margin-top: 8px;
}

.mct-savings-tag.mct-upgrade-highlight {
	background: #fde8e8;
	color: #991b1b;
}

/* Feature List (Middle Section) */
.mct-card-body {
	flex: 1;
	margin-bottom: 26px;
}

.mct-feature-items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mct-feature-items li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 14px;
	color: #1e293b;
	line-height: 1.4;
	text-align: left;
}

.mct-icon-check {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #ecfdf5;
	color: #10b981;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	flex-shrink: 0;
}

.mct-icon-cross {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #f9fafb;
	color: #9ca3af;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 800;
	flex-shrink: 0;
}

/* Button Action (Placed at the VERY BOTTOM) */
.mct-card-action {
	margin-top: auto;
	width: 100%;
}

.mct-btn {
	display: block;
	width: 100%;
	padding: 13px 20px;
	border-radius: 8px !important;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	border: none !important;
	transition: all 0.2s ease;
	text-decoration: none;
	box-sizing: border-box;
	box-shadow: none !important;
}

/* Primary Button Color #e11417 */
.mct-btn-subscribe,
.mct-btn-upgrade {
	background-color: #e11417 !important;
	color: #ffffff !important;
}

.mct-btn-subscribe:hover,
.mct-btn-upgrade:hover {
	background-color: #c81013 !important;
	color: #ffffff !important;
	transform: none !important;
}

.mct-btn-current {
	background-color: #e2e8f0 !important;
	color: #64748b !important;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Distinct Border & Button Colors per Card Theme
   -------------------------------------------------------------------------- */

/* 1. Standard / Free Card Theme */
.mct-pricing-card.period-free,
.mct-pricing-card.mct-style-default {
	border: 2px solid #64748b !important;
}

.mct-pricing-card.period-free .mct-card-top-bar,
.mct-pricing-card.mct-style-default .mct-card-top-bar,
.mct-pricing-card.period-free .mct-btn-subscribe,
.mct-pricing-card.mct-style-default .mct-btn-subscribe {
	background-color: #64748b !important;
	color: #ffffff !important;
}

.mct-pricing-card.period-free .mct-btn-subscribe:hover,
.mct-pricing-card.mct-style-default .mct-btn-subscribe:hover {
	background-color: #475569 !important;
}

/* 2. Monthly / Featured Theme (Crimson Red #e11417) */
.mct-pricing-card.period-monthly,
.mct-pricing-card.mct-style-featured {
	border: 2px solid #e11417 !important;
}

.mct-pricing-card.period-monthly .mct-card-top-bar,
.mct-pricing-card.mct-style-featured .mct-card-top-bar,
.mct-pricing-card.period-monthly .mct-btn-subscribe,
.mct-pricing-card.mct-style-featured .mct-btn-subscribe {
	background-color: #e11417 !important;
	color: #ffffff !important;
}

.mct-pricing-card.period-monthly .mct-btn-subscribe:hover,
.mct-pricing-card.mct-style-featured .mct-btn-subscribe:hover {
	background-color: #c81013 !important;
}

/* 3. Annual / VIP Gold Theme (Gold #f59e0b) */
.mct-pricing-card.period-annual,
.mct-pricing-card.mct-style-vip {
	border: 2px solid #f59e0b !important;
}

.mct-pricing-card.period-annual .mct-card-top-bar,
.mct-pricing-card.mct-style-vip .mct-card-top-bar,
.mct-pricing-card.period-annual .mct-btn-subscribe,
.mct-pricing-card.mct-style-vip .mct-btn-subscribe,
.mct-pricing-card.period-annual .mct-btn-upgrade,
.mct-pricing-card.mct-style-vip .mct-btn-upgrade {
	background-color: #f59e0b !important;
	color: #ffffff !important;
}

.mct-pricing-card.period-annual .mct-btn-subscribe:hover,
.mct-pricing-card.mct-style-vip .mct-btn-subscribe:hover,
.mct-pricing-card.period-annual .mct-btn-upgrade:hover,
.mct-pricing-card.mct-style-vip .mct-btn-upgrade:hover {
	background-color: #d97706 !important;
}

/* 4. Emerald Pro Style (Green #10b981) */
.mct-pricing-card.mct-style-emerald {
	border: 2px solid #10b981 !important;
}

.mct-pricing-card.mct-style-emerald .mct-card-top-bar,
.mct-pricing-card.mct-style-emerald .mct-btn-subscribe {
	background-color: #10b981 !important;
	color: #ffffff !important;
}

.mct-pricing-card.mct-style-emerald .mct-btn-subscribe:hover {
	background-color: #059669 !important;
}

/* 5. Dark Modern Style */
.mct-pricing-card.mct-style-dark {
	background-color: #0f172a !important;
	color: #f8fafc !important;
	border: 2px solid #38bdf8 !important;
}

.mct-pricing-card.mct-style-dark .mct-card-top-bar,
.mct-pricing-card.mct-style-dark .mct-btn-subscribe {
	background-color: #38bdf8 !important;
	color: #0f172a !important;
}

.mct-pricing-card.mct-style-dark .mct-btn-subscribe:hover {
	background-color: #0ea5e9 !important;
}

.mct-pricing-card.mct-style-dark .mct-plan-name,
.mct-pricing-card.mct-style-dark .mct-price-val {
	color: #ffffff !important;
}

.mct-pricing-card.mct-style-dark .mct-price-period,
.mct-pricing-card.mct-style-dark .mct-feature-items li {
	color: #cbd5e1 !important;
}

/* ==========================================================================
   MyCreaTools Espace Abonné (User Account Dashboard Widget)
   ========================================================================== */
.mct-user-sub-card {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 8px !important;
	padding: 28px;
	max-width: 720px;
	margin: 24px auto;
	box-shadow: none !important;
	color: inherit;
}

.mct-cover-banner-preview {
	border-radius: 8px !important;
	overflow: hidden;
	border: 1px solid #f1f5f9;
}

.mct-user-sub-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f1f5f9;
}

.mct-sub-label {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	color: #e11417;
	letter-spacing: 0.8px;
}

.mct-sub-plan-title {
	font-size: 24px;
	font-weight: 800;
	margin: 4px 0 0 0;
	color: #0f172a;
}

.mct-status-badge-front {
	padding: 5px 14px;
	border-radius: 8px !important;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.5px;
	box-shadow: none !important;
}

.mct-status-badge-front.active {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #bbf7d0;
}

.mct-sub-meta-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}

.mct-meta-item {
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	padding: 14px 16px;
	border-radius: 8px !important;
}

.mct-meta-title {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 4px;
}

.mct-meta-val {
	font-size: 14.5px;
	font-weight: 800;
	color: #0f172a;
}

.mct-sub-hr {
	border: 0;
	border-top: 1px solid #f1f5f9;
	margin: 24px 0;
}

.mct-usage-title {
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 16px 0;
	color: #0f172a;
}

.mct-quota-bars {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 24px;
}

.mct-quota-label {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 6px;
	color: #334155;
}

.mct-progress-track {
	height: 8px;
	background: #f3f4f6;
	border-radius: 8px !important;
	overflow: hidden;
	border: 1px solid #e5e7eb;
}

.mct-progress-fill {
	height: 100%;
	background: #e11417;
	border-radius: 8px !important;
	transition: width 0.4s ease;
}

.mct-privileges-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.mct-pill {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	color: #475569;
	font-size: 12.5px;
	padding: 6px 14px;
	border-radius: 8px !important;
	font-weight: 600;
}

.mct-user-sub-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 8px;
}

.mct-user-sub-actions .mct-btn-danger {
	width: auto;
	padding: 10px 18px;
	font-size: 13.5px;
	border-radius: 8px !important;
}