:root {
     --primary-navy: #0B2545;
     --accent-orange: #FF6B00;
     --text-dark: #2B3A4A;
     --text-des: #5A6A80;
     --bg-light-blue: #EEF4FF;
     --border-color: #E2E8F0;
 }

 /* ============================================
   MAIN CONTAINER & LAYOUT
   ============================================ */
 .schedule {
     padding: 80px 0 100px;
     position: relative;
 }

 .master-card {
     max-width: 1360px;
     margin: 0 auto;
     overflow: hidden;
     transition: all 0.2s;
     padding: 10px;
     position: relative;
     z-index: 2;
 }

 /* ============================================
   SECTION HEADERS
   ============================================ */
 .step-header {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     margin-bottom: 1.5rem;
 }

 .step-badge {
     width: 36px;
     height: 36px;
     background: linear-gradient(145deg, #4f46e5, #6366f1);
     color: white;
     font-weight: 700;
     font-size: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 40px;
     box-shadow: 0 6px 12px -6px rgba(79, 70, 229, 0.35);
     flex-shrink: 0;
     margin-top: 2px;
 }

 .step-title {
     font-size: 1.35rem;
     font-weight: 700;
     letter-spacing: -0.3px;
     color: #0a1c2f;
 }

 .step-sub {
     font-size: 0.85rem;
     color: #5d718b;
     margin-top: 5px;
     font-weight: 450;
 }

 .section-divider {
     border: none;
     height: 1px;
     background: linear-gradient(90deg, #e2eaf1, #cbdbe0, #e2eaf1);
     margin: 1.5rem 0 2rem 0;
     opacity: 0.55;
 }

 /* ============================================
   TRAINING TYPE GRID (MODE SELECTOR)
   ============================================ */
 .type-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.25rem;
     margin-bottom: 1rem;
     scroll-margin-top: 80px;
 }

 @media (max-width: 700px) {
     .type-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 1rem;
     }
 }

 @media (min-width: 734px) and (max-width: 880px) {
     .opt-card {
         min-width: 200px !important;
     }
 }

 .type-card {
     background: #ffffff;
     border-radius: 1.5rem;
     padding: 1.2rem 0.9rem;
     cursor: pointer;
     transition: all 0.2s ease;
     border: 1px solid #eef2f8;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
     position: relative;
     text-align: center;
 }

 .type-card:hover {
     border-color: #cbdde9;
     transform: translateY(-3px);
     box-shadow: 0 15px 25px -12px rgba(0, 0, 0, 0.08);
 }

 .type-card.selected {
     border: 2px solid #4f46e5;
     background: #fafbff;
     box-shadow: 0 10px 20px -10px rgba(79, 70, 229, 0.2);
 }

 .type-card.selected::after {
     content: "✓";
     position: absolute;
     top: 12px;
     right: 14px;
     background: #4f46e5;
     color: white;
     font-size: 11px;
     font-weight: 700;
     width: 22px;
     height: 22px;
     border-radius: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .radio-row {
     text-align: left;
     margin-bottom: 8px;
 }

 .rdot {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     border: 2px solid #cbd5e1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: white;
     transition: all 0.1s;
 }

 .rdot.on {
     border-color: #4f46e5;
     background: #4f46e5;
     box-shadow: inset 0 0 0 3px white;
 }

 .icon-circle {
     width: 58px;
     height: 58px;
     border-radius: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 12px;
     font-size: 26px;
 }

 .ic-blue {
     background: #eef2ff;
     color: #4f46e5;
 }

 .ic-purple {
     background: #f1eaff;
     color: #7c3aed;
 }

 .ic-green {
     background: #e6f9ef;
     color: #0b7e4a;
 }

 .ic-orange {
     background: #fff3e6;
     color: #ea580c;
 }

 .type-name {
     font-size: 0.95rem;
     font-weight: 700;
     color: #0f2b3d;
 }

 .type-desc {
     font-size: 0.7rem;
     font-weight: 500;
     color: #68809a;
     margin-top: 6px;
 }

 /* ============================================
   FEE PILL / BANNER
   ============================================ */
 .fee-pill {
     background: #ffffff;
     border-radius: 1.5rem;
     border: 1px solid #eef2f8;
     padding: 1.25rem 1.75rem;
     margin: 1.5rem 0;
     box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
     transition: all 0.3s ease;
 }

 .fee-inner {
     display: flex;
     align-items: center;
     gap: 24px;
     flex-wrap: wrap;
 }

 .fee-icon {
     width: 48px;
     height: 48px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     flex-shrink: 0;
 }

 /* Dynamic pill state colors */
 .fee-pill.p-online-1on1 {
     border-color: #dbeaf0;
     background: #fafcfe;
 }

 .fee-pill.p-online-group {
     border-color: #f3e8ff;
     background: #fafafb;
 }

 .fee-pill.p-public-group {
     border-color: #dcfce7;
     background: #fbfdfb;
 }

 .fee-pill.p-corporate {
     border-color: #ffedd5;
     background: #fffdfa;
 }

 .fi-blue {
     background: #eef2ff;
     color: #4f46e5;
 }

 .fi-purple {
     background: #f1eaff;
     color: #7c3aed;
 }

 .fi-green {
     background: #e6f9ef;
     color: #0b7e4a;
 }

 .fi-orange {
     background: #fff3e6;
     color: #ea580c;
 }

 .fee-info {
     display: flex;
     flex-direction: column;
     min-width: 140px;
 }

 .fee-mode-name {
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-weight: 700;
     color: #64748b;
 }

 .fee-amount {
     font-size: 2rem;
     font-weight: 800;
     color: #0f172a;
     line-height: 1.1;
     margin: 2px 0;
 }

 .fee-amount sup {
     font-size: 1.1rem;
     font-weight: 600;
     top: -0.4em;
 }

 .fee-per {
     font-size: 0.75rem;
     color: #64748b;
 }

 .fee-divider {
     width: 1px;
     height: 50px;
     background: #e2e8f0;
 }

 .fee-details-block {
     flex: 1;
     min-width: 240px;
 }

 .fee-badge {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 30px;
     font-size: 0.7rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.3px;
 }

 .badge-blue {
     background: #e0e7ff;
     color: #4338ca;
 }

 .badge-purple {
     background: #f3e8ff;
     color: #6b21a8;
 }

 .badge-green {
     background: #dcfce7;
     color: #15803d;
 }

 .badge-orange {
     background: #ffedd5;
     color: #c2410c;
 }

 .fee-note {
     font-size: 0.85rem;
     color: #475569;
     font-weight: 450;
     line-height: 1.4;
 }

 .fee-amount-wrapper {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
 }

 .fee-icon-badge {
     display: flex;
     align-items: center;
     gap: 4px;
     background: linear-gradient(135deg, #fef3c7, #fde68a);
     padding: 2px 10px 2px 6px;
     border-radius: 30px;
     border: 1px solid #f59e0b;
 }

 .fee-icon-badge i {
     font-size: 0.7rem;
     color: #d97706;
 }

 .fee-icon-badge span {
     font-size: 0.8rem;
     font-weight: 800;
     text-transform: uppercase;
     color: #92400e;
     letter-spacing: 0.5px;
 }

 @media (max-width: 640px) {
     .fee-divider {
         display: none;
     }

     .fee-inner {
         gap: 16px;
     }
 }

 /* ============================================
   SESSIONS TABLE
   ============================================ */
 .sessions-table {
     width: 100%;
     border-collapse: collapse;
     border-radius: 24px;
     overflow: hidden;
 }

 .sessions-table th {
     font-size: 0.75rem;
     font-weight: 600;
     color: #52647c;
     padding: 1rem 12px;
     border-bottom: 1px solid #eef2f8;
     text-align: left;
     background: #fafcff;
 }

 .sessions-table th i {
     margin-right: 6px;
     color: #4f46e5;
     vertical-align: middle;
 }

 .sessions-table td {
     padding: 1rem 12px;
     border-bottom: 1px solid #eff3f9;
     vertical-align: middle;
     font-size: 0.85rem;
     color: #1e2f41;
     background: white;
 }

 .month-label {
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     font-size: 0.7rem;
     font-weight: 700;
     color: #4f46e5;
     background: #eff3fe;
     padding: 8px 5px;
     border-radius: 28px;
     text-align: center;
 }

 .date-main {
     font-weight: 700;
     font-size: 0.9rem;
     color: #1e293b;
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .date-sub {
     font-size: 0.7rem;
     color: #5f7f9e;
     margin-top: 4px;
     display: flex;
     gap: 6px;
     align-items: center;
 }

 .dur-main,
 .seats-main {
     font-weight: 600;
     display: inline-flex;
     gap: 6px;
     align-items: center;
 }

 .seats-sub {
     font-size: 0.7rem;
     background: #eaf5ff;
     display: inline-block;
     padding: 2px 8px;
     border-radius: 30px;
     color: #1e6f9f;
     margin-top: 5px;
 }

 .enroll-btn {
     background: #4f46e5;
     border: none;
     border-radius: 32px;
     padding: 8px 20px;
     font-size: 0.8rem;
     font-weight: 600;
     color: white;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .enroll-btn:hover {
     background: #3730a3;
     transform: scale(0.97);
     box-shadow: 0 8px 16px -8px rgba(79, 70, 229, 0.4);
 }

 /* Mobile stacked table */
 @media (max-width: 740px) {
     .sessions-table thead {
         display: none;
     }

     .sessions-table tr {
         display: block;
         border: 1px solid #eef2f8;
         border-radius: 1.5rem;
         margin-bottom: 1.2rem;
         padding: 1.2rem 1.5rem;
         background: white;
     }

     .sessions-table td {
         display: grid;
         grid-template-columns: 150px 1fr;
         align-items: start;
         padding: 0.8rem 0;
         border-bottom: 1px solid #f4f7fc;
     }

     .sessions-table td:last-of-type {
         border-bottom: none;
     }

     /* Column 1: The CSS Label */
     .sessions-table td::before {
         content: attr(data-label);
         font-weight: 600;
         font-size: 0.85rem;
         color: #52647c;
         padding-top: 2px;
         /* Keeps label aligned with the text next to it */
     }

     /* Column 2: The wrapper containing main and sub items */
     .cell-content {
         display: flex;
         flex-direction: column;
         gap: 6px;
         /* Spacing between Main text and Sub text */
         text-align: left;
     }

     /* Extra alignment cleanups */
     .date-main,
     .dur-main,
     .seats-main {
         font-size: 0.9rem;
         color: #1e293b;
     }

     .date-sub,
     .dur-sub,
     .seats-sub {
         margin-top: 0 !important;
         /* Reset desktop margins */
     }

     .month-col {
         display: none !important;
     }

     .action-col {
         display: block !important;
         padding-top: 1rem;
         border-bottom: none;
     }

     .action-col::before {
         display: none;
     }

     .enroll-btn {
         width: 100%;
         justify-content: center;
         margin-top: 0.5rem;
         padding: 12px 24px;
         background: #5046e5;
         border-radius: 24px;
         font-size: 0.9rem;
     }
 }

 /* ============================================
   ONLINE GROUP CUSTOMIZATION
   ============================================ */
 .cust-top {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
     margin-bottom: 1.5rem;
 }

 .seats-notice {
     display: flex;
     align-items: center;
     gap: 8px;
     background: #f0f4fe;
     padding: 7px 15px;
     border-radius: 60px;
     font-size: 0.8rem;
     color: #1e293b;
 }

 .seats-notice a {
     color: #4f46e5;
     font-weight: 700;
     text-decoration: none;
 }

 .cust-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
     margin-bottom: 0.5rem;
 }

 @media (max-width: 720px) {
     .cust-grid {
         grid-template-columns: 1fr;
         gap: 1.2rem;
     }
 }

 .cust-label {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 0.8rem;
     font-weight: 600;
     color: #4a5c74;
     margin-bottom: 12px;
 }

 .cust-label i {
     font-size: 1.2rem;
     color: #4f46e5;
 }

 .option-row {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .opt-card {
     border: 1px solid #e4eaf0;
     border-radius: 1.2rem;
     padding: 10px 16px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 12px;
     background: white;
     transition: all 0.2s;
     flex: 1;
     min-width: 105px;
 }

 .opt-card.selected {
     border: 1.5px solid #4f46e5;
     background: #f9fafe;
 }

 .opt-text .ot-main {
     font-size: 0.85rem;
     font-weight: 700;
     color: #0f2b3d;
 }

 .opt-text .ot-sub {
     font-size: 0.7rem;
     color: #6c86a3;
     margin-top: 2px;
 }

 .filter-row {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .filter-btn {
     border: 1px solid #e2eaf1;
     background: white;
     border-radius: 60px;
     padding: 9px 14px;
     font-size: 0.8rem;
     font-weight: 500;
     color: #1e2f41;
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     transition: 0.15s;
 }

 .filter-btn i:first-child {
     color: #4f46e5;
     font-size: 1rem;
 }

 .filter-btn:hover {
     background: #f5f9ff;
     border-color: #b9cee6;
 }

 /* ============================================
   1 ON 1 ONLINE WORKSPACE
   ============================================ */
 .g-view {
     font-family: 'Plus Jakarta Sans', sans-serif;
 }

 .g-step-number {
     width: 36px;
     height: 36px;
     background-color: #dbebff;
     color: #2563eb;
     font-weight: 700;
     font-size: 0.9rem;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .g-selection-card {
     border: 1.5px solid #e2e8f0;
     border-radius: 14px;
     padding: 1.25rem 1.5rem;
     cursor: pointer;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: #ffffff;
     transition: all 0.25s ease;
 }

 .g-selection-card:hover {
     border-color: #cbd5e1;
     background-color: #f8fafc;
 }

 .g-selection-card.active {
     border-color: #2563eb;
     box-shadow: 0 0 0 1px #2563eb;
 }

 .g-icon-wrapper {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     flex-shrink: 0;
 }

 .g-icon-blue {
     background-color: #eff6ff;
     color: #2563eb;
 }

 .g-icon-green {
     background-color: #f0fdf4;
     color: #16a34a;
 }

 .g-icon-purple {
     background-color: #faf5ff;
     color: #7c3aed;
 }

 .g-icon-orange {
     background-color: #fff7ed;
     color: #ea580c;
 }

 .g-radio-dot {
     width: 22px;
     height: 22px;
     border: 2px solid #cbd5e1;
     border-radius: 50%;
     display: inline-block;
     position: relative;
     flex-shrink: 0;
     transition: all 0.2s ease;
 }

 .g-selection-card.active .g-radio-dot {
     border-color: #2563eb;
 }

 .g-selection-card.active .g-radio-dot::after {
     content: '';
     width: 10px;
     height: 10px;
     background-color: #2563eb;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .g-custom-form-select {
     height: 48px;
     border-radius: 10px !important;
     font-size: 0.95rem;
 }

 .g-input-group-text-custom {
     background-color: #fff !important;
     border-right: none !important;
     border-radius: 10px 0 0 10px !important;
     color: #64748b;
 }

 .g-form-select-custom {
     border-left: none !important;
     color: #64748b;
 }

 .g-btn-generate {
     background-color: #0b2574;
     border: none;
     height: 48px;
     border-radius: 10px;
     font-weight: 600;
     font-size: 0.95rem;
     transition: background-color 0.2s ease;
     color: #ffffff;
 }

 .g-btn-generate:hover {
     background-color: #06174a;
     color: #f0f5ff;
 }

 .g-info-banner {
     background-color: #f0f5ff;
     border-radius: 14px;
     padding: 1rem 1.5rem;
 }

 .g-info-icon {
     width: 38px;
     height: 38px;
     background-color: #2563eb;
     color: #ffffff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     flex-shrink: 0;
 }

 /* ============================================
   CORPORATE FORM
   ============================================ */
 .corporate-form-container {
     display: none;
     animation: fadeInUp 0.4s ease;
 }

 .corporate-form-container.active {
     display: block;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .corporate-form-wrapper {
     background: #ffffff;
     border-radius: 24px;
     padding: 2rem;
     border: 1px solid #eef2f8;
     box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
     margin-top: 1.5rem;
 }

 .corporate-form-wrapper .form-title {
     font-size: 1.3rem;
     font-weight: 700;
     color: #0f172a;
     margin-bottom: 0.5rem;
 }

 .corporate-form-wrapper .form-subtitle {
     color: #64748b;
     font-size: 0.9rem;
     margin-bottom: 1.5rem;
 }

 .corporate-form-group {
     margin-bottom: 1.2rem;
 }

 .corporate-form-group label {
     font-size: 0.8rem;
     font-weight: 600;
     color: #334155;
     display: block;
     margin-bottom: 0.4rem;
 }

 .corporate-form-group label .required {
     color: #ef4444;
     margin-left: 2px;
 }

 .corporate-form-group .form-control,
 .corporate-form-group .form-select {
     width: 100%;
     padding: 0.7rem 1rem;
     border: 1.5px solid #e2e8f0;
     border-radius: 12px;
     font-size: 0.9rem;
     transition: all 0.2s ease;
     background: #fafbfc;
 }

 .corporate-form-group .form-control:focus,
 .corporate-form-group .form-select:focus {
     border-color: #4f46e5;
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
     outline: none;
     background: #ffffff;
 }

 .corporate-form-group .form-control::placeholder {
     color: #94a3b8;
 }

 .corporate-form-group textarea.form-control {
     resize: vertical;
     min-height: 100px;
 }

 .corporate-submit-btn {
     background: linear-gradient(135deg, #4f46e5, #7c3aed);
     border: none;
     border-radius: 40px;
     padding: 0.8rem 2rem;
     font-weight: 700;
     font-size: 0.9rem;
     color: white;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
 }

 .corporate-submit-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
 }

 .corporate-submit-btn:active {
     transform: translateY(0);
 }

 .corporate-submit-btn i {
     font-size: 1.1rem;
 }

 @media (max-width: 768px) {
     .corporate-form-wrapper {
         padding: 1.5rem;
     }

     .corporate-form-wrapper .form-title {
         font-size: 1.1rem;
     }

     .corporate-submit-btn {
         width: 100%;
         justify-content: center;
     }
 }

 /* Hide other UIs when corporate is selected */
 #publicGroupUI.hidden,
 #onlineGroupUI.hidden,
 #oneOnOneUI.hidden {
     display: none !important;
 }

 /* ============================================
   SEARCH SECTION
   ============================================ */
 .search-section .field-group {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     align-items: center;
 }

 .field-wrap {
     flex: 1 0 140px;
     position: relative;
 }

 .search-btn {
     background: #4f46e5;
     border: none;
     border-radius: 40px;
     padding: 0.6rem 1.4rem;
     color: white;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 @media (max-width: 600px) {
     .field-wrap {
         flex: 1 0 100%;
     }

     .search-btn {
         width: 100%;
         justify-content: center;
     }
 }

 /* ============================================
   FLOATING MODE SWITCHER (Mobile Only - Stays within #section1)
   ============================================ */
 .floating-mode-switcher {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 999;
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-radius: 60px;
     padding: 6px 10px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.5);
     display: none;
     gap: 4px;
     max-width: 92vw;
     overflow-x: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
     transition: opacity 0.3s ease;
 }

 .floating-mode-switcher::-webkit-scrollbar {
     display: none;
 }

 .floating-mode-switcher .fm-item {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 6px 14px;
     border-radius: 40px;
     font-size: 0.7rem;
     font-weight: 600;
     color: #64748b;
     cursor: pointer;
     white-space: nowrap;
     transition: all 0.2s ease;
     border: 1.5px solid transparent;
     background: transparent;
     flex-shrink: 0;
 }

 .floating-mode-switcher .fm-item i {
     font-size: 0.9rem;
 }

 .floating-mode-switcher .fm-item.active {
     background: #4f46e5;
     color: white;
     border-color: #4f46e5;
     box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
 }

 .floating-mode-switcher .fm-item:not(.active):hover {
     background: #f1f5f9;
 }

 /* Show on mobile only - visibility controlled by JavaScript */
 @media (max-width: 768px) {
     .schedule {
         padding-bottom: 100px;
     }
 }

 @media (max-width: 420px) {
     .floating-mode-switcher .fm-item {
         padding: 4px 10px;
         font-size: 0.6rem;
     }

     .floating-mode-switcher .fm-item i {
         font-size: 0.75rem;
     }
 }

 /* ============================================
   TIME PICKER
   ============================================ */
 .time-input-container {
     position: relative;
 }

 .time-input {
     width: 100%;
     padding: 16px;
     font-size: 16px;
     border: 1px solid #ddd;
     border-radius: 4px;
     background-color: white;
     cursor: pointer;
     transition: border-color 0.3s;
 }

 .time-input:focus {
     outline: none;
     border-color: #f3ae21;
 }

 .time-input:hover {
     border-color: #999;
 }

 .time-picker-container {
     background-color: white;
     border-radius: 8px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
     width: 100%;
     max-width: 320px;
     overflow: hidden;
     position: absolute;
     bottom: 100%;
     left: 0;
     z-index: 100;
     margin-bottom: 8px;
     display: none;
 }

 .time-picker-header {
     background-color: #f3ae21;
     color: white;
     padding: 11px;
     text-align: center;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .time-display {
     font-size: 48px;
     font-weight: 300;
     margin-bottom: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .time-display span {
     cursor: pointer;
     padding: 0 5px;
     border-radius: 4px;
     transition: background-color 0.2s;
 }

 .time-display span:hover {
     background-color: rgba(255, 255, 255, 0.1);
 }

 .time-display .separator {
     cursor: default;
 }

 .time-display .separator:hover {
     background-color: transparent;
 }

 .am-pm-selector {
     display: flex;
     justify-content: center;
     gap: 10px;
 }

 .am-pm-btn {
     background: none;
     border: none;
     color: white;
     font-size: 14px;
     padding: 5px 10px;
     border-radius: 4px;
     cursor: pointer;
     opacity: 0.7;
     transition: all 0.2s;
 }

 .am-pm-btn.active {
     opacity: 1;
     background-color: rgba(255, 255, 255, 0.2);
 }

 .back-btn {
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: white;
     cursor: pointer;
     display: none;
 }

 .time-picker-body {
     padding: 20px;
 }

 .clock-face {
     position: relative;
     width: 250px;
     height: 250px;
     margin: 0 auto;
     border-radius: 50%;
     background-color: #f5f5f5;
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .clock-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 12px;
     height: 12px;
     background-color: #f3ae21;
     border-radius: 50%;
     z-index: 10;
 }

 .clock-hand {
     position: absolute;
     top: 50%;
     left: 50%;
     transform-origin: 0 0;
     background-color: #f3ae21;
     border-radius: 2px;
     z-index: 5;
     display: none;
 }

 .hour-hand {
     width: 60px;
     height: 4px;
     transform: translateY(-50%);
 }

 .minute-hand {
     width: 90px;
     height: 3px;
     transform: translateY(-50%);
 }

 .clock-number {
     position: absolute;
     width: 40px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 50%;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.2s;
     user-select: none;
 }

 .clock-number:hover {
     background-color: rgba(33, 150, 243, 0.1);
 }

 .clock-number.active {
     background-color: #f3ae21;
     color: white;
 }

 .time-picker-footer {
     display: flex;
     justify-content: flex-end;
     padding: 10px 20px 20px;
     gap: 10px;
 }

 .btn {
     padding: 8px 16px;
     border: none;
     border-radius: 4px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .btn-cancel {
     background-color: transparent;
     color: #f3ae21;
 }

 .btn-cancel:hover {
     background-color: rgba(33, 150, 243, 0.1);
 }

 .btn-ok {
     background-color: #f3ae21;
     color: white;
 }

 .btn-ok:hover {
     background-color: #1976D2;
 }

 .input-label {
     display: block;
     margin-bottom: 8px;
     font-size: 14px;
     color: #666;
 }

 .backdrop {
     position: fixed;
     top: 20%;
     left: 35%;
     width: 100%;
     height: auto;
     background-color: transparent;
     z-index: 9999;
     display: none;
 }

 .mode-indicator {
     text-align: center;
     margin-bottom: 10px;
     font-size: 14px;
     color: #666;
     height: 20px;
 }

 @media (max-width: 1199px) {
     .time-picker-container {
         position: fixed !important;
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
         width: 90%;
         max-width: 320px;
         z-index: 100;
     }

     .backdrop {
         background-color: rgba(0, 0, 0, 0.5);
     }
 }

 #oneOnOneScheduleModal .modal {
     top: 0 !important;
 }

 /* ============================================
   ENROLLMENT MODAL
   ============================================ */
 #enrollmentModal .modal-content {
     border: none;
     border-radius: 28px;
     overflow: hidden;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
     background: #ffffff;
 }

 #enrollmentModal .modal-header {
     background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
     padding: 1.5rem 1.8rem;
     border-bottom: none;
 }

 #enrollmentModal .modal-title {
     color: white;
     font-weight: 700;
     font-size: 1.4rem;
     letter-spacing: -0.3px;
     margin: 0;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 }

 #enrollmentModal .btn-close {
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     padding: 0.6rem;
     opacity: 1;
     transition: all 0.3s ease;
     filter: brightness(0) invert(1);
 }

 #enrollmentModal .btn-close:hover {
     background-color: rgba(255, 255, 255, 0.3);
     transform: rotate(90deg);
 }

 #enrollmentModal .modal-body {
     padding: 1.8rem !important;
     background: #f9fafb;
 }

 #enrollmentModal .bg-light {
     background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%) !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 20px !important;
     padding: 1.2rem !important;
     margin-bottom: 1.5rem !important;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }

 #enrollmentModal .bg-light h5 {
     font-size: 1rem;
     font-weight: 700;
     color: #1f2937;
     margin-bottom: 0.5rem;
 }

 #enrollmentModal .bg-light h5 strong {
     color: #4f46e5;
 }

 #enrollmentModal .bg-light p {
     margin-bottom: 0.5rem;
     font-size: 0.85rem;
     color: #4b5563;
 }

 #enrollmentModal .bg-light strong {
     color: #4f46e5;
     font-weight: 600;
 }

 #enrollmentModal .form-label {
     font-weight: 600;
     font-size: 0.8rem;
     color: #374151;
     margin-bottom: 0.4rem;
     display: block;
     letter-spacing: -0.2px;
 }

 #enrollmentModal .form-control,
 #enrollmentModal .form-select {
     border: 1.5px solid #e5e7eb;
     border-radius: 12px;
     padding: 0.6rem 1rem;
     font-size: 0.85rem;
     transition: all 0.2s ease;
     background-color: #ffffff;
 }

 #enrollmentModal .form-control:focus,
 #enrollmentModal .form-select:focus {
     border-color: #4f46e5;
     box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
     outline: none;
 }

 #enrollmentModal .select2-container--default .select2-selection--single {
     border: 1.5px solid #e5e7eb;
     border-radius: 12px;
     height: 42px;
     padding: 0.4rem 1rem;
 }

 #enrollmentModal .select2-container--default .select2-selection--single .select2-selection__rendered {
     line-height: 28px;
     color: #1f2937;
     font-size: 0.85rem;
 }

 #enrollmentModal .select2-container--default .select2-selection--single .select2-selection__arrow {
     height: 40px;
     right: 8px;
 }

 #enrollmentModal .select2-dropdown {
     border-radius: 12px;
     border-color: #e5e7eb;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 #enrollmentModal .select2-container--default .select2-results__option--highlighted[aria-selected] {
     background-color: #4f46e5;
 }

 #enrollmentModal textarea.form-control {
     resize: vertical;
     min-height: 80px;
 }

 #enrollmentModal #phone-status {
     font-size: 0.7rem;
     margin-top: 0.3rem;
 }

 #enrollmentModal .btn-secondary {
     background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
     border: none;
     border-radius: 40px;
     padding: 0.8rem 1.5rem;
     font-weight: 700;
     font-size: 0.9rem;
     color: white !important;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
 }

 #enrollmentModal .btn-secondary:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
     background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
 }

 #enrollmentModal .btn-secondary:active {
     transform: translateY(0);
 }

 #enrollmentModal .return1 {
     margin-bottom: 1rem;
 }

 #enrollmentModal .alert {
     border-radius: 16px;
     border: none;
     padding: 0.8rem 1rem;
     font-size: 0.85rem;
 }

 #enrollmentModal .alert-success {
     background-color: #d1fae5;
     color: #065f46;
 }

 #enrollmentModal .alert-danger {
     background-color: #fee2e2;
     color: #991b1b;
 }

 #enrollmentModal .alert-info {
     background-color: #dbeafe;
     color: #1e40af;
 }

 #enrollmentModal .row {
     margin-left: -0.5rem;
     margin-right: -0.5rem;
 }

 #enrollmentModal .row>[class*="col-"] {
     padding-left: 0.5rem;
     padding-right: 0.5rem;
 }

 #enrollmentModal .modal.fade .modal-dialog {
     transform: scale(0.95);
     transition: transform 0.2s ease-out;
 }

 #enrollmentModal .modal.show .modal-dialog {
     transform: scale(1);
 }

 #enrollmentModal .btn-secondary:disabled {
     opacity: 0.7;
     transform: none;
     cursor: not-allowed;
 }

 #enrollmentModal .input-group-text {
     border: 1.5px solid #e5e7eb;
     border-right: none;
     background-color: #f9fafb;
     border-radius: 12px 0 0 12px;
 }

 #enrollmentModal .input-group .form-control {
     border-radius: 0 12px 12px 0;
 }

 #enrollmentModal .f-12 {
     font-size: 0.7rem;
     color: #6b7280;
 }

 #enrollmentModal .form-label::after {
     content: "*";
     color: #ef4444;
     margin-left: 0.2rem;
 }

 #enrollmentModal .form-label:not([data-required])::after {
     content: none;
 }

 @media (max-width: 768px) {
     #enrollmentModal .modal-header {
         padding: 1rem 1.2rem;
     }

     #enrollmentModal .modal-title {
         font-size: 1.2rem;
     }

     #enrollmentModal .modal-body {
         padding: 1.2rem !important;
     }

     #enrollmentModal .bg-light {
         padding: 1rem !important;
     }

     #enrollmentModal .btn-secondary {
         width: 100%;
     }
 }

 /* ============================================
   MODAL POPUP LAYER (Weekend Selection)
   ============================================ */
 .backdrop-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(30, 27, 75, 0.45);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1.5rem;
     z-index: 5000;
 }

 .modal-container {
     background: #fff;
     border-radius: 20px;
     width: 100%;
     max-width: 560px;
     overflow: hidden;
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }

 .modal-header-cust {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1.4rem 1.5rem 1.1rem;
 }

 .modal-title-cust {
     font-size: 22px;
     font-weight: 600;
     color: #0f0c2e;
     margin-bottom: 0px;
 }

 .close-btn {
     background: none;
     border: none;
     cursor: pointer;
     color: #888;
     font-size: 20px;
     line-height: 1;
     padding: 4px;
     border-radius: 6px;
     transition: color 0.15s;
 }

 .close-btn:hover {
     color: #333;
 }

 .modal-divider {
     border: none;
     border-top: 1px solid #ebebf0;
     margin: 0;
 }

 .modal-body-cust {
     padding: 1.25rem 1.5rem 1.5rem;
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .opt {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 14px 16px;
     border: 1.5px solid #e8e8f0;
     border-radius: 14px;
     cursor: pointer;
     background: #fff;
     transition: border-color 0.15s, background 0.15s;
     position: relative;
 }

 .opt:hover {
     border-color: #c4b8f5;
 }

 .opt.selected {
     border-color: #6c47e8;
     background: #f5f2ff;
 }

 .icon-wrap {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: #ede9f8;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: background 0.15s;
 }

 .opt.selected .icon-wrap {
     background: #6c47e8;
 }

 .icon-wrap i {
     font-size: 22px;
     color: #6c47e8;
     transition: color 0.15s;
 }

 .opt.selected .icon-wrap i {
     color: #fff;
 }

 .opt-label {
     font-size: 17px;
     font-weight: 400;
     color: #1a1a2e;
     flex: 1;
 }

 .check-circle {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: #6c47e8;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     opacity: 0;
     transform: scale(0.6);
     transition: opacity 0.2s, transform 0.2s;
 }

 .check-circle i {
     font-size: 16px;
     color: #fff;
 }

 .opt.selected .check-circle {
     opacity: 1;
     transform: scale(1);
 }

 .sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
 }

 /* ============================================
   UTILITY & LOADER
   ============================================ */
 .schedule-loader {
     padding: 40px 20px;
     text-align: center;
 }

 .schedule-loader .spinner-border {
     width: 2.5rem;
     height: 2.5rem;
 }

 .schedule-loader p {
     margin-top: 12px;
     color: #6b7280;
     font-size: 0.9rem;
 }

 .enrollment-popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(11, 37, 69, 0.5);
     backdrop-filter: blur(6px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 99999;
     padding: 20px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s ease;
 }

 .enrollment-popup-overlay.active {
     opacity: 1;
     pointer-events: auto;
 }

 .popup-card {
     max-width: 1000px;
     width: 100%;
     background: #ffffff;
     border-radius: 24px;
     overflow: hidden;
     box-shadow: 0 30px 60px rgba(11, 37, 69, 0.25);
     transform: scale(0.95);
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     position: relative;
 }

 .enrollment-popup-overlay.active .popup-card {
     transform: scale(1);
 }

 .popup-close-btn {
     position: absolute;
     top: 18px;
     right: 20px;
     background: #f1f5f9;
     border: none;
     width: 38px;
     height: 38px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     color: #475569;
     cursor: pointer;
     transition: 0.2s;
     z-index: 10;
 }

 .popup-close-btn:hover {
     background: #e2e8f0;
     transform: rotate(90deg);
 }

 .content-padding {
     padding: 3rem 2.5rem 2rem 3rem;
     position: relative;
 }

 .header-icon {
     width: 58px;
     height: 58px;
     border-radius: 50%;
     border: 3.5px solid #0066FF;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     flex-shrink: 0;
 }

 .header-icon::before {
     content: '';
     position: absolute;
     top: -10px;
     width: 4px;
     height: 8px;
     background: var(--accent-orange);
     border-radius: 2px;
     box-shadow: -12px 5px 0 var(--accent-orange), 12px 5px 0 var(--accent-orange);
 }

 .title-main {
     font-weight: 800;
     color: var(--primary-navy);
     font-size: 2.3rem;
     line-height: 1.05;
     letter-spacing: -0.5px;
 }

 .title-orange {
     color: var(--accent-orange);
     display: block;
 }

 .orange-line {
     width: 55px;
     height: 3.5px;
     background-color: var(--accent-orange);
     border-radius: 2px;
     margin-top: 10px;
     margin-bottom: 20px;
 }

 .subtitle {
     font-weight: 800;
     color: var(--primary-navy);
     font-size: 1.35rem;
     margin-bottom: 6px;
 }

 .description {
     color: var(--text-des);
     font-size: 0.95rem;
     line-height: 1.5;
     font-weight: 500;
 }

 .steps-container {
     border: 1.5px solid var(--border-color);
     border-radius: 14px;
     padding: 14px 10px;
     margin-top: 1.8rem;
     margin-bottom: 1.25rem;
 }

 .step-item {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .step-icon-bg {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background-color: var(--bg-light-blue);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .step-text {
     font-size: 0.82rem;
     font-weight: 700;
     color: var(--primary-navy);
     line-height: 1.25;
 }

 .info-box {
     background-color: var(--bg-light-blue);
     border-radius: 14px;
     padding: 18px 20px;
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 1.25rem;
 }

 .info-box-text {
     color: var(--primary-navy);
     font-size: 0.95rem;
     line-height: 1.45;
     font-weight: 500;
 }

 .info-box-text strong {
     font-weight: 800;
 }

 .payment-notice {
     display: flex;
     align-items: center;
     gap: 14px;
     color: var(--text-dark);
     font-size: 0.95rem;
     font-weight: 500;
 }

 .payment-notice strong {
     color: var(--primary-navy);
     font-weight: 800;
 }

 .art-column {
     background: url('/webpage/img/enrollment-success-popup.png');
     background-size: contain;
     background-repeat: no-repeat;
     background-position: right;
 }

 .card-footer-banner {
     background-color: var(--primary-navy);
     color: #ffffff;
     padding: 14px 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
     font-size: 0.92rem;
     font-weight: 600;
 }

 .footer-divider {
     opacity: 0.3;
     font-weight: 300;
 }

 .footer-highlight {
     color: var(--accent-orange);
 }

 @media (max-width: 991.98px) {
     .content-padding {
         padding: 2rem 1.5rem;
     }

     .card-footer-banner {
         flex-direction: column;
         gap: 6px;
         text-align: center;
     }

     .footer-divider {
         display: none;
     }

     .art-column {
         min-height: 240px;
         background: #fff;
     }

     .popup-close-btn {
         top: 12px;
         right: 14px;
         width: 34px;
         height: 34px;
         font-size: 1rem;
     }
 }

 @media (max-width: 576px) {
     .title-main {
         font-size: 1.8rem;
     }

     .step-text {
         font-size: 0.7rem;
     }

     .step-icon-bg {
         width: 36px;
         height: 36px;
     }
 }

 #corporateTrainingForm .corporate-submit-btn:disabled {
     opacity: 0.7;
     transform: none;
     cursor: not-allowed;
 }
 #enrollmentModal{
    background: #06174a25;
 }