.tab-trigger {
     padding: 10px 22px;
     border-radius: 999px;
     border: 1.5px solid var(--border);
     background: transparent;
     color: var(--text2);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: var(--transition);
 }

 .tab-trigger.active,
 .tab-trigger:hover {
     background: rgba(249, 115, 22, 0.1);
     border-color: var(--accent);
     color: var(--accent);
 }

 .course-details-tab {
     padding: 10px 22px;
     border-radius: 999px;
     border: 1.5px solid var(--border);
     background: transparent;
     color: var(--text2);
     font-size: 14px;
     font-weight: 500;
     display: flex;
     align-items: center;
     cursor: pointer;
     transition: var(--transition);
 }

 .course-details-tab:hover {
     background: rgba(249, 115, 22, 0.1);
     border-color: var(--accent);
     color: var(--accent);
 }


 .tab-panel {
     display: none;
 }

 .tab-panel.active {
     display: block;
 }

 .instructor-card {
     display: flex;
     gap: 20px;
     padding: 28px;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     align-items: flex-start;
 }

 .instructor-big-avatar {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: linear-gradient(135deg, #f97316, #ec4899);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 24px;
     flex-shrink: 0;
 }

 /* Modal */

 .k2-overlay {
     position: fixed;
     inset: 0;
     z-index: 9000;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
     background: rgba(0, 0, 0, 0.72);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.28s ease;
 }

 .k2-overlay.k2-open {
     opacity: 1;
     pointer-events: all;
 }

 .k2-overlay.k2-open .k2-card {
     transform: translateY(0) scale(1);
     opacity: 1;
 }

 /* Card */

 .k2-card {
     position: relative;
     width: 100%;
     max-width: 500px;
     max-height: 92vh;
     overflow-y: auto;
     background: var(--bg-card);
     box-shadow:
         0 0 0 1px var(--border),
         0 32px 80px rgba(0, 0, 0, 0.6);
     border-radius: 22px;
     transform: translateY(28px) scale(0.97);
     opacity: 0;
     transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
     scrollbar-width: none;
 }

 .k2-card::-webkit-scrollbar {
     display: none;
 }

 .k2-card {
     -ms-overflow-style: none;
 }

 .k2-top-bar {
     height: 5px;
     background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #a855f7 100%);
     border-radius: 22px 22px 0 0;
     flex-shrink: 0;
 }

 .k2-body {
     padding: 28px 28px 32px;
 }

 .k2-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 22px;
 }

 .k2-eyebrow {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2.5px;
     text-transform: uppercase;
     color: var(--accent);
     margin-bottom: 5px;
 }

 .k2-title {
     margin: 0;
     font-size: 23px;
     font-weight: 900;
     line-height: 1.2;
     background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #a855f7 100%);
     ;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .k2-close-btn {
     flex-shrink: 0;
     width: 34px;
     height: 34px;
     border: none;
     border-radius: 9px;
     background: var(--bg-glass);
     color: var(--text2);
     font-size: 18px;
     line-height: 1;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.2s, color 0.2s;
 }

 .k2-close-btn:hover {
     background: var(--bg3);
     color: var(--text);
 }

 .k2-course-badge {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 15px;
     background: var(--bg-glass);
     border: 1px solid var(--border-h);
     border-radius: 13px;
     margin-bottom: 24px;
 }

 .k2-badge-icon {
     width: 38px;
     height: 38px;
     border-radius: 10px;
     background: linear-gradient(135deg, #a78bfa, #6366f1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     flex-shrink: 0;
 }

 .k2-badge-meta {
     min-width: 0;
 }

 .k2-badge-label {
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.2px;
     color: #64748b;
     margin-bottom: 2px;
 }

 .k2-badge-name {
     font-size: 14px;
     font-weight: 700;
     color: var(--text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .k2-field {
     margin-bottom: 16px;
 }

 .k2-label {
     display: block;
     font-size: 11px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.9px;
     color: var(--text2);
     margin-bottom: 7px;
 }

 .k2-label .req {
     color: #f87171;
     margin-left: 2px;
 }

 .k2-input-wrap {
     position: relative;
 }

 .k2-input-icon {
     position: absolute;
     left: 13px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 16px;
     pointer-events: none;
     line-height: 1;
 }

 .k2-input {
     width: 100%;
     padding: 12px 14px 12px 42px;
     color: var(--text);
     background: var(--bg-glass);
     border: 1.5px solid var(--border);
     border-radius: 11px;
     font-size: 14px;
     font-family: inherit;
     outline: none;
     transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
     box-sizing: border-box;
 }

 .k2-input:focus {
     border-color: var(--accent);
     background: rgba(99, 102, 241, 0.08);
     box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
 }

 .k2-input::placeholder {
     color: var(--text3);
     ;
 }

 /* Chrome autofill fix */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 select:-webkit-autofill {

     -webkit-text-fill-color: var(--text) !important;

     /* fake background override */
     -webkit-box-shadow: 0 0 0px 1000px var(--bg-card) inset !important;
     box-shadow: 0 0 0px 1000px var(--bg-card) inset !important;

     /* prevent flash */
     transition: background-color 9999s ease-in-out 0s;

     border: 1.5px solid var(--accent);
 }

 .k2-input[readonly] {
     opacity: 0.55;
     cursor: not-allowed;
 }

 .k2-input.k2-error {
     border-color: var(--accent);
     background: rgba(248, 113, 113, 0.06);
 }

 .k2-field-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
 }

 @media (max-width: 420px) {
     .k2-field-row {
         grid-template-columns: 1fr;
     }
 }

 .k2-submit-btn {
     width: 100%;
     padding: 15px;
     margin-top: 22px;
     border: none;
     border-radius: 13px;
     background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #a855f7 100%);
     color: #fff;
     font-size: 15px;
     font-weight: 700;
     font-family: inherit;
     letter-spacing: 0.3px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
     box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
 }

 .k2-submit-btn:hover:not(:disabled) {
     opacity: 0.9;
     transform: translateY(-1px);
     box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
 }

 .k2-submit-btn:active:not(:disabled) {
     transform: translateY(0);
 }

 .k2-submit-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
 }

 .k2-spinner {
     display: none;
     width: 17px;
     height: 17px;
     border: 2.5px solid rgba(255, 255, 255, 0.3);
     border-top-color: #fff;
     border-radius: 50%;
     animation: k2-spin 0.7s linear infinite;
     flex-shrink: 0;
 }

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

 .k2-legal {
     margin-top: 13px;
     font-size: 11px;
     color: var(--text3);
     text-align: center;
     line-height: 1.65;
 }

 .k2-legal a {
     color: var(--accent);
     text-decoration: none;
 }

 .k2-legal a:hover {
     text-decoration: underline;
 }

 .k2-success-step {
     display: none;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 40px 28px 44px;
 }

 .k2-success-ring {
     width: 76px;
     height: 76px;
     border-radius: 50%;
     background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #a855f7 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 34px;
     margin-bottom: 20px;
     box-shadow: 0 0 0 12px rgba(99, 102, 241, 0.12);
     animation: k2-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }

 @keyframes k2-pop {
     from {
         transform: scale(0.5);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 .k2-success-title {
     font-size: 24px;
     font-weight: 900;
     color: var(--text);
     margin-bottom: 10px;
 }

 .k2-success-msg {
     font-size: 15px;
     color: var(--text2);
     line-height: 1.75;
     margin-bottom: 28px;
 }

 .k2-success-msg strong {
     color: var(--text);
 }

 .k2-success-close-btn {
     padding: 13px 36px;
     border: none;
     border-radius: 11px;
     background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #a855f7 100%);
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     font-family: inherit;
     cursor: pointer;
     transition: opacity 0.2s, transform 0.15s;
 }

 .k2-success-close-btn:hover {
     opacity: 0.88;
     transform: translateY(-1px);
 }

 .k2-toast {
     position: fixed;
     bottom: 28px;
     right: 24px;
     z-index: 99999;
     padding: 13px 20px;
     border-radius: 11px;
     font-size: 14px;
     font-weight: 500;
     color: #fff;
     max-width: 320px;
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.3s ease;
     pointer-events: none;
 }

 .k2-toast.k2-toast--error {
     background: #ef4444;
     box-shadow: 0 8px 28px rgba(239, 68, 68, .35);
 }

 .k2-toast.k2-toast--success {
     background: #10b981;
     box-shadow: 0 8px 28px rgba(16, 185, 129, .35);
 }