:is(#page-local-companytenants-purchase, #page-local-companytenants-buy) { background: #fbfaf6 !important; }
:is(#page-local-companytenants-purchase, #page-local-companytenants-buy) :is(#page, #page-content, #region-main-box, #region-main, [role="main"], .main-inner, #topofscroll) {
background: transparent !important; box-shadow: none !important; border: 0 !important;
}
:is(#page-local-companytenants-purchase, #page-local-companytenants-buy) :is(#region-main, [role="main"]) { padding: 0 !important; }
:is(#page-local-companytenants-purchase, #page-local-companytenants-buy) #page-header { display: none !important; }
.companytenants-page.ctp {
--blue: #1f5eff; --blue-d: #1747c9; --glow: #3d7bff; --cyan: #37c6ff; --navy: #1b3f94; --ink: #101c3d;
--t2: #4b587a; --t3: #8791ad; --line: #dbe3f5; --soft: #eaf0ff; --gold: #f0b429; --green: #12a37b;
max-width: 1140px !important; margin: 0 auto !important; padding: 20px 8px 60px !important;
background: transparent !important; box-shadow: none !important; border: 0 !important;
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif !important; color: var(--ink);
-webkit-font-smoothing: antialiased;
}
.ctp *, .ctp *::before, .ctp *::after { box-sizing: border-box; }
.ctp a { text-decoration: none !important; }
.ctp h2, .ctp h3 { font-family: 'Poppins', sans-serif !important; color: var(--ink) !important; }
/* Breadcrumb */
.ctp .companytenants-breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 12.5px !important; color: var(--t3); margin: 0 0 18px !important; padding: 0 !important; background: none !important; }
.ctp .companytenants-breadcrumb a { color: var(--t2) !important; font-weight: 500; }
.ctp .companytenants-breadcrumb a:hover { color: var(--blue) !important; }
.ctp .companytenants-breadcrumb-current { color: var(--ink) !important; font-weight: 600; }
/* Stepper: HUD stations joined by a light beam */
.ctp .ctp-stepper { display: flex; align-items: center; justify-content: center; gap: 0; padding: 18px 24px; margin-bottom: 22px;
background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 24px rgba(27,63,148,.05); }
.ctp .ctp-step { display: flex; align-items: center; gap: 12px; }
.ctp .ctp-step-dot { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
font: 700 13px/1 'JetBrains Mono', monospace; color: var(--t3); background: #f3f5fa; border: 1.5px dashed #cbd4e8; }
.ctp .ctp-step small { display: block; font: 700 9.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--t3); margin-bottom: 4px; }
.ctp .ctp-step b { display: block; font-size: 14px; font-weight: 600; color: var(--t3); white-space: nowrap; }
.ctp .ctp-step.is-done .ctp-step-dot { color: #fff; border: 0; background: radial-gradient(circle at 35% 30%, #6d9bff, var(--blue) 60%, var(--blue-d)); box-shadow: 0 6px 14px rgba(31,94,255,.3); }
.ctp .ctp-step.is-done b { color: var(--ink); }
.ctp .ctp-step.is-active .ctp-step-dot { color: var(--blue); background: #fff; border: 2px solid var(--blue); box-shadow: 0 0 0 5px rgba(31,94,255,.12), 0 0 18px rgba(61,123,255,.4); }
.ctp .ctp-step.is-active .ctp-step-dot::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(61,123,255,.4); animation: ctp-ring 2.4s ease-out infinite; }
@keyframes ctp-ring { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.ctp .ctp-step.is-active small { color: var(--blue); }
.ctp .ctp-step.is-active b { color: var(--ink); }
.ctp .ctp-link { flex: 1; max-width: 130px; min-width: 40px; height: 2px; margin: 0 18px; background: repeating-linear-gradient(90deg, #c8d4ee 0 4px, transparent 4px 9px); }
.ctp .ctp-link.is-done { height: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 2px 1px var(--glow), 0 0 8px 2px rgba(61,123,255,.5); }
/* Layout: main card left, order summary right */
.ctp .companytenants-purchase-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 380px !important; gap: 22px !important; align-items: start; }
.ctp .companytenants-purchase-sidebar { order: 2; }
.ctp .companytenants-card { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 22px !important; padding: 30px 32px !important;
box-shadow: 0 1px 2px rgba(16,28,61,.04), 0 12px 32px rgba(27,63,148,.07) !important; color: var(--ink); margin: 0 !important; }
.ctp .companytenants-shop-kicker { display: inline-block; font: 700 11px/1.2 'JetBrains Mono', ui-monospace, monospace !important; letter-spacing: .14em; text-transform: uppercase; color: var(--blue) !important; margin-bottom: 8px; }
.ctp .companytenants-card h2 { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 0 0 8px !important; line-height: 1.15; }
.ctp .companytenants-shop-desc { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 22px !important; font-size: 14.5px !important; line-height: 1.6; color: var(--t2) !important; text-align: left !important; }
.ctp .companytenants-muted { color: var(--t3) !important; }
/* Moodle form, restyled */
.ctp .mform fieldset { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.ctp .mform .form-group.row, .ctp .mform .fitem { display: block !important; margin: 0 0 16px !important; }
.ctp .mform .form-group.row > [class*="col-md-"], .ctp .mform .fitem > [class*="col-md-"] { max-width: 100% !important; width: 100% !important; flex: none !important; padding: 0 !important; }
.ctp .mform .col-form-label, .ctp .mform label { font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; padding: 0 0 6px !important; margin: 0 !important; display: inline-flex; align-items: center; gap: 6px; }
.ctp .mform .form-control { width: 100% !important; max-width: 100% !important; font: 500 14.5px/1.4 'Poppins', sans-serif !important; color: var(--ink) !important;
padding: 12px 14px !important; border: 1.5px solid var(--line) !important; border-radius: 12px !important; background: #fbfcff !important; box-shadow: none !important; height: auto !important; }
.ctp .mform .form-control:focus { border-color: var(--blue) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(31,94,255,.14) !important; }
.ctp .mform textarea.form-control { min-height: 96px; }
.ctp .mform .text-danger, .ctp .mform .icon.fa-exclamation-circle { color: #d64545 !important; }
.ctp .mform .form-control-feedback, .ctp .mform .invalid-feedback { font-size: 12px !important; }
.ctp .mform .fdescription.required { font-size: 12px; color: var(--t3); margin-top: 6px; }
.ctp .mform [data-fieldtype="group"] .col-md-9 > fieldset > .d-flex, .ctp .mform .fitem_actionbuttons .felement { display: flex !important; gap: 10px; flex-wrap: wrap; }
.ctp .mform #fgroup_id_buttonar, .ctp .mform [id^="fgroup_id_buttonar"] { margin-top: 26px !important; padding-top: 20px !important; border-top: 1px solid #edf1f8; }
.ctp .mform [id^="fgroup_id_buttonar"] > .col-md-3 { display: none !important; }
/* Buttons */
.ctp .btn { font: 600 14.5px/1 'Poppins', sans-serif !important; border-radius: 12px !important; padding: 14px 22px !important; transition: .18s !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; }
.ctp .btn-primary { position: relative; overflow: hidden; background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(31,94,255,.32) !important; }
.ctp .btn-primary:hover { background: var(--blue-d) !important; border-color: var(--blue-d) !important; transform: translateY(-1px); }
.ctp .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform: translateX(-120%); animation: ctp-sweep 3.8s ease-in-out 1.2s infinite; }
@keyframes ctp-sweep { 0%,55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ctp .btn-secondary { background: #fff !important; color: var(--t2) !important; border: 1.5px solid var(--line) !important; box-shadow: none !important; }
.ctp .btn-secondary:hover { color: var(--blue) !important; border-color: var(--blue) !important; }
.ctp .btn-link { color: var(--t2) !important; box-shadow: none !important; }
.ctp .btn svg { width: 18px; height: 18px; stroke: currentColor; }
.ctp .companytenants-card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* Order summary */
.ctp .ctp-sum { padding: 0 !important; overflow: hidden; position: sticky; top: 90px; }
.ctp .ctp-sum-banner { --h: 218; position: relative; height: 128px; overflow: hidden; border-bottom: 1px solid #e6ecf8;
background: linear-gradient(135deg, #f2f6ff 0%, #ffffff 55%, hsl(var(--h) 90% 97%) 100%); }
.ctp .ctp-geo-circle { position: absolute; right: -34px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: hsl(var(--h) 85% 92%); }
.ctp .ctp-geo-tri { position: absolute; right: -2px; bottom: -2px; width: 160px; height: 110px; background: linear-gradient(135deg, hsl(var(--h) 80% 58%), hsl(var(--h) 85% 45%)); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ctp .ctp-geo-tri2 { position: absolute; right: 128px; bottom: -2px; width: 90px; height: 70px; background: hsl(var(--h) 80% 86%); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ctp .ctp-geo-dots { position: absolute; left: 48%; top: 22px; width: 50px; height: 30px; opacity: .5; background-image: radial-gradient(hsl(var(--h) 70% 55%) 1.4px, transparent 1.6px); background-size: 10px 10px; }
.ctp .ctp-saber { position: absolute; left: 66%; bottom: -8px; width: 12px; height: 200px; transform: rotate(38deg); transform-origin: 50% 100%; }
.ctp .ctp-hilt { position: absolute; left: 0; bottom: 0; width: 12px; height: 50px; border-radius: 3px;
background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(0,0,0,.55) 6px 8px), linear-gradient(90deg, #14181f 0%, #7d8698 40%, #cfd6e2 52%, #4a5262 70%, #14181f 100%);
box-shadow: 0 8px 14px rgba(16,28,61,.35); }
.ctp .ctp-hilt::before { content: ''; position: absolute; left: -2px; right: -2px; top: -4px; height: 7px; border-radius: 2px; background: linear-gradient(90deg, #1b2029, #aab3c5 50%, #1b2029); }
.ctp .ctp-blade { position: absolute; left: 2px; bottom: 53px; width: 8px; height: 150px; border-radius: 6px 6px 2px 2px; background: #fff;
box-shadow: 0 0 3px 2px hsl(var(--h) 100% 72%), 0 0 12px 5px hsl(var(--h) 100% 56%), 0 0 28px 10px hsla(var(--h), 100%, 56%, .45);
transform-origin: 50% 100%; animation: ctp-ignite .8s cubic-bezier(.3,1.2,.4,1) .2s both; }
@keyframes ctp-ignite { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ctp .ctp-sum-tag { position: absolute; left: 18px; top: 16px; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: var(--t2); padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.85); border: 1px solid var(--line); }
.ctp .ctp-sum-body { padding: 20px 24px 24px; }
.ctp .ctp-sum-body h3 { font-size: 20px !important; font-weight: 700 !important; margin: 4px 0 14px !important; }
.ctp .ctp-sum-price { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: 14px; background: #f5f8ff; margin-bottom: 16px; }
.ctp .ctp-sum-price span { font-size: 12.5px; color: var(--t2); }
.ctp .ctp-sum-price b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ctp .ctp-sum-facts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ctp .ctp-sum-facts li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--t2); }
.ctp .ctp-sum-facts svg { width: 17px; height: 17px; color: var(--blue); flex-shrink: 0; }
.ctp .ctp-sum-benefits { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid #edf1f8; display: flex; flex-direction: column; gap: 12px; }
.ctp .ctp-sum-benefits li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; }
.ctp .ctp-sum-benefits i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #e2f6ef; color: var(--green); font-style: normal; }
.ctp .ctp-sum-benefits i svg { width: 13px; height: 13px; }
.ctp .ctp-sum-benefits b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ctp .ctp-sum-benefits p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--t3); }
/* Override old plugin CSS: full-width cards, left-aligned text, visible stroke icons */
.ctp .companytenants-payment-card, .ctp .companytenants-login-required, .ctp .companytenants-purchase-card { max-width: none !important; width: 100% !important; text-align: left !important; }
.ctp .companytenants-login-required { max-width: 760px !important; }
.ctp .ctp-sum svg, .ctp .ctp-trust svg, .ctp .ctp-step-dot svg { stroke: currentColor; fill: none; }
.ctp .ctp-login .companytenants-card-actions { justify-content: flex-start; }
/* Payment step */
.ctp .ctp-pay-head { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.ctp .ctp-pay-head img { width: 92px; height: auto; flex-shrink: 0; filter: drop-shadow(0 10px 14px rgba(16,28,61,.2)); animation: ctp-float 4s ease-in-out infinite; }
@keyframes ctp-float { 50% { transform: translateY(-6px); } }
.ctp .ctp-pay-head .companytenants-shop-desc { margin: 0 !important; }
.ctp .ctp-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; margin-bottom: 18px; border-radius: 16px;
background: linear-gradient(135deg, #0b1633, #12306b 60%, #1b3f94); color: #fff; position: relative; overflow: hidden; }
.ctp .ctp-total::before { content: ''; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(1.2px 1.2px at 12% 30%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 38% 76%, rgba(255,255,255,.7) 50%, transparent 52%),
radial-gradient(1.3px 1.3px at 64% 22%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,.7) 50%, transparent 52%),
radial-gradient(300px 120px at 100% 0%, rgba(55,198,255,.3), transparent 60%); }
.ctp .ctp-total > * { position: relative; }
.ctp .ctp-total small { display: block; font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: #7fc4ff; margin-bottom: 6px; }
.ctp .ctp-total span { font-size: 13px; color: #b9c9ee; }
.ctp .ctp-total b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.ctp .ctp-pay-btn { width: 100%; padding: 17px 22px !important; font-size: 16px !important; }
.ctp .ctp-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.ctp .ctp-trust span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #f5f8ff; font-size: 12px; font-weight: 600; color: var(--t2); }
.ctp .ctp-trust svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
.ctp .companytenants-purchase-securenote { margin: 14px 0 0 !important; font-size: 12px !important; color: var(--t3) !important; text-align: center; }
/* Login required (buy.php) */
.ctp .ctp-login { max-width: 720px; margin: 20px auto 0 !important; display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: center; }
.ctp .ctp-login img { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(16,28,61,.22)); animation: ctp-float 4s ease-in-out infinite; }
/* Core payment (Stripe) modal */
:is(#page-local-companytenants-purchase) .modal-content { border: 0 !important; border-radius: 22px !important; overflow: hidden; box-shadow: 0 30px 80px rgba(16,28,61,.35) !important; font-family: 'Poppins', sans-serif !important; }
:is(#page-local-companytenants-purchase) .modal-header { border: 0 !important; padding: 22px 26px 4px !important; }
:is(#page-local-companytenants-purchase) .modal-title { font: 700 20px/1.2 'Poppins', sans-serif !important; color: #101c3d !important; }
:is(#page-local-companytenants-purchase) .modal-body { padding: 10px 26px 8px !important; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control { padding-left: 0 !important; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-input { position: absolute; opacity: 0; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-label {
display: block !important; width: 100%; margin: 8px 0 !important; padding: 18px 20px 16px 58px !important; cursor: pointer; position: relative;
background: #fbfcff !important; border: 1.5px solid #dbe3f5 !important; border-radius: 16px !important; transition: .15s; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-label::before,
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-label::after { left: 20px !important; top: 22px !important; width: 20px !important; height: 20px !important; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-input:checked ~ .custom-control-label {
border-color: #1f5eff !important; background: #f3f7ff !important; box-shadow: 0 0 0 4px rgba(31,94,255,.12), 0 0 18px rgba(61,123,255,.18); }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-input:checked ~ .custom-control-label::before { background: #1f5eff !important; border-color: #1f5eff !important; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-label .h3 { font: 700 17px/1.2 'Poppins', sans-serif !important; color: #101c3d !important; margin: 0 0 4px !important; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-label .content { font-size: 13px !important; line-height: 1.5; color: #4b587a !important; margin: 0 0 10px !important; }
:is(#page-local-companytenants-purchase) .core_payment_gateways_modal .custom-control-label img { height: 22px; width: auto; }
:is(#page-local-companytenants-purchase) .core_payment_fee_breakdown { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 6px; padding: 14px 16px; border-radius: 14px;
background: #f5f8ff; font: 600 15px/1.2 'Poppins', sans-serif; color: #101c3d; }
:is(#page-local-companytenants-purchase) .modal-footer { border: 0 !important; padding: 12px 26px 24px !important; gap: 10px; flex-direction: row-reverse; justify-content: flex-start !important; }
:is(#page-local-companytenants-purchase) .modal-footer .btn { font: 600 14.5px/1 'Poppins', sans-serif !important; border-radius: 12px !important; padding: 13px 22px !important; margin: 0 !important; }
:is(#page-local-companytenants-purchase) .modal-footer .btn-primary { background: #1f5eff !important; border-color: #1f5eff !important; box-shadow: 0 8px 20px rgba(31,94,255,.3) !important; }
:is(#page-local-companytenants-purchase) .modal-footer .btn-secondary { background: #fff !important; color: #4b587a !important; border: 1.5px solid #dbe3f5 !important; }
:is(#page-local-companytenants-purchase) .modal-backdrop.show { opacity: .55 !important; background: #0c1632 !important; }
@media (max-width: 900px) {
.ctp .companytenants-purchase-layout { grid-template-columns: 1fr !important; }
.ctp .companytenants-purchase-sidebar { order: -1; }
.ctp .ctp-sum { position: static; }
.ctp .ctp-trust { grid-template-columns: 1fr; }
.ctp .ctp-step b { display: none; }
.ctp .ctp-login { grid-template-columns: 1fr; text-align: center; }
.ctp .ctp-login img { width: 150px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.ctp *, .ctp *::before, .ctp *::after { animation: none !important; transition: none !important; }
}
Step 01 · Your account
Log in or create an account to continue
To purchase this training package, you need to log in or create an account first. After that, you will enter your company details and continue to payment.