/* Modern glass UI theme */
:root {
  --brand-1: #2f3193;
  --brand-2: #4b51d4;
  --brand-gradient: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  --page-bg: #f3f5fb;
  --surface-bg: rgba(255, 255, 255, 0.72);
  --surface-bg-strong: rgba(255, 255, 255, 0.88);
  --surface-border: rgba(255, 255, 255, 0.6);
  --surface-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  --surface-shadow-strong: 0 20px 50px rgba(15, 23, 42, 0.18);
  --glass-blur: 18px;
  --radius-card: 18px;
  --radius-soft: 12px;
  --radius-pill: 999px;
  --text-strong: #0f172a;
  --text-muted: #64748b;
  --border-soft: rgba(15, 23, 42, 0.08);
  --ring: rgba(47, 49, 147, 0.35);
  --bs-primary: #2f3193;
  --bs-primary-rgb: 47, 49, 147;
  --bs-info: #2f3193;
  --bs-info-rgb: 47, 49, 147;
  --bs-link-color: #2f3193;
}

.night-mode {
  --page-bg: #0f1222;
  --surface-bg: rgba(18, 20, 36, 0.78);
  --surface-bg-strong: rgba(18, 20, 36, 0.9);
  --surface-border: rgba(255, 255, 255, 0.08);
  --surface-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --surface-shadow-strong: 0 22px 60px rgba(0, 0, 0, 0.6);
  --text-strong: #e2e8f0;
  --text-muted: #94a3b8;
  --border-soft: rgba(255, 255, 255, 0.08);
  --ring: rgba(165, 180, 252, 0.35);
  --bs-primary: #2f3193;
  --bs-primary-rgb: 47, 49, 147;
  --bs-info: #2f3193;
  --bs-info-rgb: 47, 49, 147;
  --bs-link-color: #a5b4fc;
}

body {
  background: var(--page-bg);
  color: var(--text-strong);
}

.night-mode body {
  background: var(--page-bg) !important;
  color: var(--text-strong);
}

header.header {
  background: var(--surface-bg) !important;
  border-bottom: 1px solid var(--surface-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.vertical_nav {
  background: var(--surface-bg);
  border-right: 1px solid var(--surface-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.menu--link.active,
.menu--link:hover {
  background: rgba(47, 49, 147, 0.12) !important;
  color: var(--brand-1) !important;
}

.night-mode .menu--link.active,
.night-mode .menu--link:hover {
  background: rgba(165, 180, 252, 0.15) !important;
  color: var(--text-strong) !important;
}

:where(.dropdown-menu, .drop-down, .dropdown-content, .menu.dropdown_mn, .menu.dropdown_ms, .ui.dropdown .menu) {
  background: var(--surface-bg) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-soft);
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.dropdown_account.drop-down,
.profile-dropdown .dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--surface-shadow-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.dropdown_ms.drop-down,
.dropdown_mn.drop-down {
  background: #fff !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--surface-shadow-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: hidden;
}

.night-mode .dropdown_account.drop-down,
.night-mode .profile-dropdown .dropdown-menu {
  background: #121424 !important;
  border-color: var(--surface-border) !important;
}

.night-mode .dropdown_ms.drop-down,
.night-mode .dropdown_mn.drop-down {
  background: #121424 !important;
  border-color: var(--surface-border) !important;
}

.dropdown_account .channel_my,
.dropdown_account .channel_item,
.dropdown_account .night_mode_switch__btn a {
  border-radius: var(--radius-soft) !important;
}

:where(.fcrse_1, .fcrse_2, .fcrse_3, .fcrse_4, .card_dash, .card_dash1, .analysis_card,
  .review_all120, .review_item, .contact_link_step, .payout_content, .verification_content,
  .career_item, .job_box, .job_item, .notification-box, .my_course_item, .feature_careers .item,
  .value_props, .value_props50, .value_props51, .help_link) {
  background: var(--surface-bg) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

:where(.fcrse_1, .fcrse_2, .fcrse_3, .fcrse_4) {
  overflow: hidden;
}

:where(.fcrse_img img, .hf_img img, .cpy_img img, .bg_blog2 img, .jmio125 img, .story125 img) {
  border-radius: calc(var(--radius-card) - 6px) !important;
}

.modal-content {
  background: var(--surface-bg) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-card);
  box-shadow: var(--surface-shadow-strong);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

:where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"],
  textarea, select, .form-control, .ui.input>input, .ui.search .prompt, .swdh10 input, .swdh11 input, .swdh19 input) {
  background: var(--surface-bg-strong) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-soft) !important;
  color: var(--text-strong) !important;
}

:where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"],
  textarea, select, .form-control, .ui.input>input, .ui.search .prompt):focus {
  border-color: var(--brand-2) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

::placeholder {
  color: var(--text-muted);
}

:where(.upload_btn, .btn1542, .crer_btn_link, .save_btn, .save_payout_btn, .create_btn_dash,
  .apply_btn, .login-btn, .certi-btn, .knowledge_btn, .download_btn, .chckot_btn, .code-apply-btn,
  .btn_buy, .btn_adcart, .subscribe-btn, .api_btn, .add_crdit_btn, .discount_btn, .plan_link_btn,
  .allnews_btn, .btn1458, .save_address_btn, .test_submit_btn, .payout__btn, .apply_instructor_btn,
  .btn500, .studio-link-btn, .msg125, .main-btn, .chck-btn22) {
  background: var(--brand-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-soft) !important;
  box-shadow: var(--surface-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

:where(.upload_btn, .btn1542, .crer_btn_link, .save_btn, .save_payout_btn, .create_btn_dash,
  .apply_btn, .login-btn, .certi-btn, .knowledge_btn, .download_btn, .chckot_btn, .code-apply-btn,
  .btn_buy, .btn_adcart, .subscribe-btn, .api_btn, .add_crdit_btn, .discount_btn, .plan_link_btn,
  .allnews_btn, .btn1458, .save_address_btn, .test_submit_btn, .payout__btn, .apply_instructor_btn,
  .btn500, .studio-link-btn, .msg125, .main-btn, .chck-btn22):hover {
  filter: brightness(1.05);
  box-shadow: var(--surface-shadow-strong);
  transform: translateY(-1px);
}

.main-btn.cancel,
.cancel-btn {
  background: var(--surface-bg-strong) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: none;
}

:where(.shrt-cart-btn, .rvsrch_btn, .st_download_btn) {
  background: var(--surface-bg-strong) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-soft) !important;
  box-shadow: var(--surface-shadow);
}

.night_mode_switch__btn a {
  border-radius: var(--radius-pill) !important;
}

.btn-night-mode {
  background: var(--surface-bg-strong) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--surface-shadow);
}

.noti_count,
.badge_seller,
.crse_reviews {
  background: var(--brand-gradient) !important;
}

.btn-primary,
.btn-info,
.btn-outline-primary,
.btn-outline-info,
.bg-primary,
.bg-info,
.text-bg-primary,
.text-bg-info {
  background-image: var(--brand-gradient) !important;
  background-color: var(--brand-1) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-outline-primary,
.btn-outline-info {
  box-shadow: var(--surface-shadow);
}

.dataTables_wrapper {
  margin-top: 0.75rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--surface-bg-strong) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-soft) !important;
  color: var(--text-strong) !important;
  padding: 0.35rem 0.6rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--brand-2) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

table.dataTable,
table.dataTable.no-footer {
  background: var(--surface-bg) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--surface-shadow) !important;
  overflow: hidden;
}

table.dataTable thead th {
  background: rgba(47, 49, 147, 0.08) !important;
  color: var(--text-strong) !important;
  border-bottom: 1px solid var(--surface-border) !important;
}

.night-mode table.dataTable thead th {
  background: rgba(165, 180, 252, 0.12) !important;
}

table.dataTable tbody td {
  color: var(--text-strong) !important;
}

table.js-data-table thead th,
table.js-data-table thead td,
table.js-data-table tfoot th,
table.js-data-table tfoot td {
  padding: 1rem 1.25rem;
}

table.js-data-table tbody td,
table.js-data-table tbody th {
  padding: 1rem 1.25rem;
  line-height: 1.5;
  vertical-align: middle;
}

table.dataTable tbody tr {
  background: transparent !important;
}

table.dataTable tbody tr:hover {
  background: rgba(47, 49, 147, 0.05) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--surface-bg-strong) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-soft) !important;
  color: var(--text-strong) !important;
  padding: 0.25rem 0.6rem !important;
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--brand-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  filter: brightness(1.05);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
}

table.dataTable thead th.dt-select-col,
table.dataTable tbody td.dt-select-col,
table.dataTable tfoot th.dt-select-col {
  width: 36px;
  text-align: center;
}

.dt-select-col input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-1);
}