:root {
--tcmp-bg: #ffffff;
--tcmp-bg-soft: #f8fafc;
--tcmp-border: #e2e8f0;
--tcmp-border-strong: #cbd5e1;
--tcmp-text: #0f172a;
--tcmp-text-muted: #64748b;
--tcmp-primary: #0f172a;
--tcmp-primary-hover: #1e293b;
--tcmp-primary-rgb: 15, 23, 42;
} body.wp-admin,
body.tutor-screen-frontend-dashboard {
--tcmp-bg: #ffffff;
--tcmp-bg-soft: #f8fafc;
--tcmp-border: #e2e8f0;
--tcmp-border-strong: #cbd5e1;
--tcmp-text: #0f172a;
--tcmp-text-muted: #64748b;
--tcmp-primary: #0f172a;
--tcmp-primary-hover: #1e293b;
--tcmp-primary-rgb: 15, 23, 42;
}
.tcmp-builder-card {
margin-top: 24px;
padding: 20px;
border: 1px solid var(--tcmp-border);
border-radius: 12px;
background: var(--tcmp-bg);
box-shadow: none;
}
[data-tcmp-hidden="1"] {
display: none !important;
}
.tcmp-native-pricing-host {
margin: 0 0 16px;
}
.tcmp-bundle-builder-host {
width: 100%;
max-width: 100%;
margin: 10px 0 14px;
margin-left: 0;
padding: 0;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.tcmp-bundle-multi-plan-root {
width: 100%;
} .tcmp-bundle-builder-host .tcmp-builder-card {
margin-top: 0;
padding: 16px;
border-radius: 10px;
box-shadow: none;
}
.tcmp-bundle-builder-host .tcmp-plan-editor-card {
padding: 14px;
}
.tcmp-bundle-builder-host .tcmp-plan-editor-top {
flex-direction: column;
align-items: flex-start;
}
.tcmp-bundle-builder-host .tcmp-plan-editor-actions {
width: 100%;
}
.tcmp-bundle-builder-host .tcmp-plan-editor-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 12px;
}
.tcmp-bundle-builder-host .tcmp-col-12,
.tcmp-bundle-builder-host .tcmp-col-8,
.tcmp-bundle-builder-host .tcmp-col-6,
.tcmp-bundle-builder-host .tcmp-col-4 {
grid-column: span 1;
}
@media (max-width: 1280px) {
.tcmp-bundle-builder-host {
width: 100%;
max-width: 100%;
margin-left: 0;
}
}
@media (max-width: 1024px) {
.tcmp-bundle-builder-host {
width: 100%;
max-width: 100%;
margin-left: 0;
}
}
.tcmp-native-pricing-host .tcmp-builder-card {
margin-top: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.tcmp-builder-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.tcmp-builder-head h3 {
margin: 0;
font-size: 18px;
line-height: 1.35;
}
.tcmp-builder-head p {
margin: 6px 0 0;
color: var(--tcmp-text-muted);
font-size: 13px;
}
.tcmp-builder-head-actions {
display: flex;
align-items: center;
gap: 10px;
}
.tcmp-builder-head-actions input[type="text"] {
min-width: 220px;
padding: 8px 10px;
border: 1px solid var(--tcmp-border-strong);
border-radius: 10px;
background: #fff;
color: var(--tcmp-text);
line-height: 1.4;
}
.tcmp-builder-head-actions input[type="text"]:focus {
outline: 0;
border-color: var(--tcmp-primary);
box-shadow: 0 0 0 3px rgba(var(--tcmp-primary-rgb), 0.12);
}
.tcmp-plan-editor-list {
display: grid;
gap: 12px;
}
.tcmp-plan-editor-card {
border: 1px solid var(--tcmp-border);
border-radius: 12px;
background: var(--tcmp-bg);
padding: 14px;
box-shadow: none;
}
.tcmp-plan-editor-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.tcmp-plan-editor-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
.tcmp-plan-editor-title {
margin: 0;
color: var(--tcmp-text);
font-size: 15px;
line-height: 1.3;
font-weight: 600;
}
.tcmp-plan-editor-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
}
.tcmp-plan-editor-grid>.tcmp-field {
grid-column: span 12;
}
.tcmp-field {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.tcmp-col-12 {
grid-column: span 12;
}
.tcmp-col-8 {
grid-column: span 8;
}
.tcmp-col-6 {
grid-column: span 6;
}
.tcmp-col-4 {
grid-column: span 4;
}
.tcmp-field-label {
color: var(--tcmp-text);
font-size: 12px;
font-weight: 600;
}
.tcmp-field input[type="text"],
.tcmp-field input[type="number"],
.tcmp-field select {
width: 100%;
min-width: 0;
padding: 8px 10px;
border: 1px solid var(--tcmp-border-strong);
border-radius: 10px;
background: var(--tcmp-bg);
line-height: 1.4;
text-overflow: ellipsis;
color: var(--tcmp-text);
}
.tcmp-field input[type="number"]:disabled {
background: var(--tcmp-bg-soft);
color: var(--tcmp-text-muted);
cursor: not-allowed;
}
.tcmp-field-note {
color: var(--tcmp-text-muted);
font-size: 11px;
line-height: 1.4;
}
.tcmp-money-input {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
align-items: center;
border: 1px solid var(--tcmp-border-strong);
border-radius: 10px;
background: var(--tcmp-bg);
overflow: hidden;
}
.tcmp-money-input>span {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--tcmp-text-muted);
font-weight: 600;
background: var(--tcmp-bg-soft);
border-right: 1px solid var(--tcmp-border);
}
.tcmp-money-input input {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.tcmp-price-trial {
display: inline-flex;
align-items: center;
margin-left: 6px;
color: var(--tcmp-text-muted);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.tcmp-field-checkbox {
justify-content: flex-start;
}
.tcmp-check-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--tcmp-text);
}
.tcmp-empty-row {
color: var(--tcmp-text-muted);
text-align: center;
padding: 18px 12px;
border: 1px dashed var(--tcmp-border);
border-radius: 10px;
background: var(--tcmp-bg-soft);
}
.tcmp-builder-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 14px;
}
.tcmp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border: 1px solid var(--tcmp-border);
border-radius: 10px;
color: var(--tcmp-text);
background: var(--tcmp-bg);
cursor: pointer;
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
.tcmp-btn:hover {
border-color: var(--tcmp-border-strong);
color: var(--tcmp-text);
background: var(--tcmp-bg-soft);
}
.tcmp-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.tcmp-btn-primary {
color: #fff;
border-color: var(--tcmp-primary);
background: var(--tcmp-primary);
}
.tcmp-btn-primary:hover {
color: #fff;
border-color: var(--tcmp-primary-hover);
background: var(--tcmp-primary-hover);
}
.tcmp-btn-light {
background: var(--tcmp-bg);
border-color: var(--tcmp-border);
color: var(--tcmp-text);
}
.tcmp-btn-danger {
border-color: #f0d2d5;
color: #b42318;
}
.tcmp-btn-danger:hover {
border-color: #f3b9bf;
color: #912018;
background: #fff7f7;
}
.tcmp-note,
.tcmp-notice,
.tcmp-error {
margin: 10px 0;
padding: 9px 10px;
border-radius: 12px;
font-size: 13px;
}
.tcmp-note {
color: var(--tcmp-text-muted);
background: var(--tcmp-bg-soft);
border: 1px solid var(--tcmp-border);
}
.tcmp-plan-collapsed-note {
margin: 0;
padding: 8px 10px;
color: var(--tcmp-text-muted);
font-size: 13px;
border: 1px dashed var(--tcmp-border);
border-radius: 12px;
background: var(--tcmp-bg-soft);
}
.tcmp-notice {
color: #027a48;
background: #ecfdf3;
border: 1px solid #a6f4c5;
}
.tcmp-error {
color: #b42318;
background: #fef3f2;
border: 1px solid #fecdca;
}
.tcmp-course-plan-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 12px;
}
.tcmp-course-plan-actions {
margin-top: 14px;
}
.tcmp-course-plan-radio-option {
display: block;
margin: 0;
cursor: pointer;
}
.tcmp-course-plan-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tcmp-course-plan-radio-option.is-disabled {
cursor: default;
}
.tcmp-course-plan-card {
border: 1px solid var(--tcmp-border);
border-radius: 14px;
background: var(--tcmp-bg);
padding: 18px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.tcmp-course-plan-radio-option:hover .tcmp-course-plan-card {
border-color: var(--tcmp-primary);
box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
}
.tcmp-course-plan-radio:checked+.tcmp-course-plan-card {
border-color: var(--tcmp-primary);
box-shadow: 0 0 0 2px rgba(var(--tcmp-primary-rgb), 0.15);
}
.tcmp-course-plan-radio:disabled+.tcmp-course-plan-card {
opacity: 0.66;
box-shadow: none;
}
.tcmp-course-plan-title-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.tcmp-course-plan-title {
margin: 0;
color: var(--tcmp-text);
font-size: 18px;
line-height: 1.25;
font-weight: 700;
}
.tcmp-bundle-builder-host h3 {
margin: 0 0 18px;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
}
.tcmp-course-plan-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid var(--tcmp-border);
color: var(--tcmp-text-muted);
background: var(--tcmp-bg-soft);
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
}
.tcmp-course-plan-price {
position: relative;
margin: 12px 0 16px;
color: var(--tcmp-text);
font-size: 25px;
font-weight: 700;
line-height: 1.2;
}
.tcmp-price-current {
display: inline-block;
color: #AC2024;
font-weight: 700;
line-height: 1.2;
}
.tcmp-price-current .amount {
color: #AC2024;
}
.tcmp-price-regular {
display: inline-block;
margin-left: 8px;
color: #AC2024;
font-size: 18px;
line-height: 1.2;
font-weight: 700;
text-decoration: line-through;
}
.tcmp-price-regular .amount,
.tcmp-price-regular .woocommerce-Price-amount { color: inherit !important; font-weight: inherit !important; font-size: inherit !important; }
.tcmp-course-plan-card .tutor-btn {
border-radius: 10px;
font-weight: 600;
}
.tcmp-course-plan-voucher {
display: inline-flex;
align-items: center;
margin: -4px 0 12px;
padding: 4px 9px;
border-radius: 999px;
background: #fff7ed;
color: #9a3412;
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
.tcmp-course-plan-hint {
font-size: 12px;
line-height: 1.5;
color: var(--tcmp-text-muted);
}
.tcmp-loop-price {
display: block;
text-align: center;
}
.tcmp-loop-price>span {
display: block;
position: relative;
font-weight: 600;
color: #AC2024;
text-align: center;
}
.tcmp-loop-price-line {
display: inline-block;
line-height: 1.45;
}
.tcmp-price-range {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: 2px 7px;
max-width: 100%;
line-height: 1.35;
}
.tcmp-price-range-from,
.tcmp-price-range-to,
.tcmp-price-option {
display: inline-flex;
flex-wrap: nowrap;
align-items: baseline;
gap: 0;
white-space: nowrap;
}
.tcmp-price-option .tcmp-price-amount,
.tcmp-price-option .woocommerce-Price-amount,
.tcmp-price-option .amount {
display: inline-flex !important;
align-items: baseline;
color: #AC2024 !important;
font-weight: 700;
white-space: nowrap;
}
.tcmp-price-option .etf-wrap {
display: none !important;
}
.tcmp-price-range-to {
gap: 7px;
}
.tcmp-price-range-separator {
color: #64748b;
font-weight: 700;
}
.tcmp-price-period {
display: inline-block;
color: #AC2024 !important;
font-size: 0.68em;
font-weight: 700;
line-height: 1;
white-space: nowrap;
margin-left: 2px;
}
.tcmp-loop-price .cwy-price-period,
.tcmp-no-cwy-price-period .cwy-price-period {
display: none !important;
}
.tcmp-loop-price .tcmp-price-amount,
.tcmp-loop-price .tcmp-price-amount *,
.tcmp-loop-price .woocommerce-Price-amount,
.tcmp-loop-price .woocommerce-Price-amount *,
.tcmp-loop-price .amount,
.tcmp-loop-price .amount * {
color: #AC2024 !important;
font-weight: 700;
}
.course-archive-page .tutor-course-loop .list-item-price .tcmp-price-amount,
.course-archive-page .tutor-course-loop .list-item-price .tcmp-price-amount *,
.course-archive-page .tutor-course-loop .tutor-course-price .tcmp-price-amount,
.course-archive-page .tutor-course-loop .tutor-course-price .tcmp-price-amount * {
color: #AC2024 !important;
}
.tcmp-loop-price-type {
color: var(--tcmp-text-muted);
font-size: 12px;
font-weight: 600;
margin-right: 4px;
}
.tcmp-loop-fallback-wrap {
display: grid;
gap: 10px;
} .course-archive-page .tutor-course-loop .tutor-card,
.course-archive-page .tutor-course-loop .tutor-card-body {
min-width: 0;
}
.course-archive-page .tutor-course-loop .tutor-course-name {
margin-bottom: 0;
min-width: 0;
}
.course-archive-page .tutor-course-loop .tutor-course-name a {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
word-break: break-word;
overflow-wrap: anywhere;
}
.course-archive-page .tutor-course-loop .tutor-course-preview {
font-size: 13px;
line-height: 1.5;
color: #475569;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.course-archive-page .tutor-course-loop .tutor-course-tags {
margin-top: 8px;
min-width: 0;
}
.course-archive-page .tutor-course-loop .tutor-tag-chip {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.course-archive-page .tutor-course-loop .tutor-card-footer {
margin-top: 12px;
min-width: 0;
}
.course-archive-page .tutor-course-loop .tutor-card-footer>* {
width: 100%;
min-width: 0;
}
.course-archive-page .tutor-course-loop .tutor-card-footer .tutor-d-flex {
flex-wrap: wrap;
gap: 10px;
align-items: center;
min-width: 0;
}
.course-archive-page .tutor-course-loop .tutor-card-footer .list-item-price,
.course-archive-page .tutor-course-loop .tutor-card-footer .tutor-course-price,
.course-archive-page .tutor-course-loop .tutor-card-footer .price,
.course-archive-page .tutor-course-loop .tutor-card-footer .tcmp-loop-price {
flex: 1 1 120px;
min-width: 0;
max-width: 100%;
line-height: 1.35;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
}
.course-archive-page .tutor-course-loop .tutor-card-footer .tutor-course-list-btn,
.course-archive-page .tutor-course-loop .tutor-card-footer .list-item-button {
flex: 1 1 170px;
width: auto;
min-width: 0;
}
.course-archive-page .tutor-course-loop .tutor-card-footer .tutor-course-list-btn .tutor-btn,
.course-archive-page .tutor-course-loop .tutor-card-footer .list-item-button .tutor-btn,
.course-archive-page .tutor-course-loop .tutor-card-footer .tcmp-learn-more-btn,
.course-archive-page .tutor-course-loop .tutor-card-footer .add_to_cart_button {
width: 100%;
max-width: 100%;
min-height: 42px;
height: auto;
padding: 10px 12px;
line-height: 1.35;
text-align: center;
white-space: normal;
word-break: break-word;
overflow-wrap: anywhere;
}
.course-archive-page .tutor-course-loop .tutor-card-body .tutor-meta.tutor-mt-auto {
margin-top: 8px !important;
}
.course-archive-page .tutor-course-loop .tutor-card-body .tutor-meta {
margin-bottom: 0 !important;
}
.course-archive-page .tutor-course-loop .tutor-card-body .tutor-meta>div:last-child {
min-width: 0;
line-height: 1.45;
word-break: break-word;
overflow-wrap: anywhere;
}
@media (max-width: 767px) {
.tcmp-builder-card {
padding: 14px;
}
.tcmp-builder-head-actions {
width: 100%;
}
.tcmp-builder-head-actions input[type="text"] {
min-width: 0;
flex: 1;
}
.tcmp-plan-editor-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 10px;
}
.tcmp-col-12,
.tcmp-col-8,
.tcmp-col-6,
.tcmp-col-4 {
grid-column: span 1;
}
.tcmp-plan-editor-card {
padding: 12px;
}
.tcmp-course-plan-price {
font-size: 22px;
}
.course-archive-page .tutor-course-loop .tutor-card-body {
gap: 8px;
}
.course-archive-page .tutor-course-loop .tutor-card-footer .list-item-price,
.course-archive-page .tutor-course-loop .tutor-card-footer .tutor-course-price,
.course-archive-page .tutor-course-loop .tutor-card-footer .price,
.course-archive-page .tutor-course-loop .tutor-card-footer .tcmp-loop-price,
.course-archive-page .tutor-course-loop .tutor-card-footer .tutor-course-list-btn,
.course-archive-page .tutor-course-loop .tutor-card-footer .list-item-button {
flex: 1 1 100%;
width: 100%;
}
} .tcmp-plan-product-id {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
font-size: 12px;
font-weight: 500;
line-height: 1.6;
color: #475569;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 999px;
vertical-align: middle;
}