/* ================================================================
   aliHossain Academy — Tutor LMS dark skin.

   Tutor LMS ships light-background styling (white cards, dark text),
   which clashes with this dark theme and leaves a lot of text
   unreadable on dark areas. This file gives Tutor a consistent dark
   skin: dark surfaces + light text everywhere (dashboard, single
   course, archive), plus a 16px minimum font size.

   Loaded only when Tutor LMS is active.
   ================================================================ */

/* ---- Page roots: light body text + 16px base ---- */
.tutor-dashboard,
.tutor-frontend-dashboard,
.tutor-frontend-dashboard-header,
.tutor-course-details-page,
.tutor-single-course-sidebar,
.tutor-wrap,
.tutor-courses-wrap,
.tutor-courses,
.tutor-course-archive-wrap,
.tutor-course-spotlight-wrapper,
.tutor-course-single-sidebar-wrapper,
.tutor-course-single-content-wrapper,
.tutor-course-topic-single-header {
  color: var(--text-2);
  --tutor-body-color: #e7e2f6;
  --tutor-body-color-rgb: 231, 226, 246;
  /* Remap Tutor's blue brand colour to the theme violet for consistency. */
  --tutor-color-primary: #8b5cf6;
  --tutor-color-primary-hover: #7c3aed;
  --tutor-color-primary-rgb: 139, 92, 246;
  /* Remap Tutor's light border colour to the theme's subtle border. */
  --tutor-border-color: rgba(255, 255, 255, 0.1);
  font-size: 16px;
}

/* ---- 16px minimum: bump Tutor's small font utilities ---- */
.tutor-fs-6,
.tutor-fs-7,
.tutor-fs-8 {
  font-size: 16px !important;
  line-height: 1.6;
}

/* ---- Headings / titles: bright ---- */
.tutor-course-details-widget-title,
.tutor-course-content-title,
.tutor-dashboard-title,
.tutor-course-name,
.tutor-course-name a,
.tutor-dashboard-header-username,
.tutor-dashboard-header-display-name,
[class*='tutor-'] h1,
[class*='tutor-'] h2,
[class*='tutor-'] h3,
[class*='tutor-'] h4,
[class*='tutor-'] h5,
[class*='tutor-'] h6,
.tutor-course-details-page .tutor-color-black,
.tutor-single-course-sidebar .tutor-color-black,
.tutor-dashboard .tutor-color-black,
.tutor-frontend-dashboard .tutor-color-black {
  color: #fff;
}

/* ---- Tutor's hardcoded grey utilities -> readable on dark ---- */
.tutor-color-secondary {
  color: #b9b2d6 !important;
}
.tutor-color-muted,
.tutor-color-subdued,
.tutor-color-hints {
  color: #9a93bb !important;
}

/* ---- Links ---- */
.tutor-dashboard a,
.tutor-course-details-page a,
.tutor-single-course-sidebar a {
  color: var(--text-2);
}
.tutor-dashboard a:hover,
.tutor-course-details-page a:hover,
.tutor-single-course-sidebar a:hover {
  color: #fff;
}
.tutor-course-details-widget-list a {
  color: var(--text-2);
}
.tutor-course-details-widget-list a:hover {
  color: var(--violet-l);
}

/* ================= Surfaces -> dark, consistent ================= */
.tutor-card,
.tutor-sidebar-card,
.tutor-course-details-widget,
.tutor-accordion,
.tutor-accordion-item,
.tutor-course-content-list,
.tutor-dashboard .tutor-card,
.tutor-frontend-dashboard .tutor-card {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  color: var(--text-2);
}
.tutor-card-body,
.tutor-card-footer {
  background: transparent !important;
  border-color: var(--border) !important;
}

/* Accordion (Course Content) */
.tutor-accordion-item-header {
  background-color: var(--surface-2) !important;
  color: #fff !important;
}
.tutor-accordion-item-header.is-active {
  background-color: var(--surface-2) !important;
}
.tutor-accordion-item-body,
.tutor-accordion-item-body-content {
  background: transparent !important;
}
.tutor-course-content-list-item {
  background: transparent !important;
  border-color: var(--border) !important;
}
.tutor-course-content-list-item:hover {
  background: var(--surface-2) !important;
}
.tutor-course-content-list-item-title {
  color: var(--text);
}

/* ---- Single-course sidebar: every block becomes a dark card ----
   Matches the Add-to-Cart panel (.tutor-sidebar-card). Tutor connects these
   blocks into one near-white column via `.tutor-single-course-sidebar-more>div`
   with #fcfcfd; we split them into consistent dark cards instead. */
.tutor-single-course-sidebar-more > div,
.tutor-single-course-sidebar .tutor-course-details-widget,
.tutor-single-course-sidebar .tutor-course-details-instructors,
.tutor-course-single-info-card {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 24px !important;
  margin: 0 0 24px !important;
}
/* Tutor only rounds the first/last child of the column — round them all. */
.tutor-single-course-sidebar-more > div:first-child,
.tutor-single-course-sidebar-more > div:last-child {
  border-radius: var(--radius) !important;
}
/* Drop Tutor's inter-block divider that no longer fits separated cards. */
.tutor-single-course-sidebar-more .tutor-course-details-instructors + div {
  border-top: 1px solid var(--border) !important;
}

/* ---- "Show more" fade overlay: fade to the dark bg, not white ---- */
.tutor-toggle-more-collapsed::before,
.tutor-toggle-more-collapsed::after,
.tutor-course-details-content.tutor-toggle-more-collapsed::after {
  background: linear-gradient(rgba(7, 5, 18, 0), var(--bg)) !important;
}

/* ---- Tables (e.g. Order History) ---- */
.tutor-table {
  color: var(--text-2);
}
.tutor-table th {
  color: #fff;
}
.tutor-table tr td,
.tutor-table tr th {
  border-color: var(--border) !important;
}

/* ---- Forms ---- */
.tutor-form-control,
.tutor-form-select,
.tutor-dashboard input,
.tutor-dashboard textarea,
.tutor-dashboard select {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.tutor-dashboard label,
.tutor-frontend-dashboard label {
  color: var(--text-2);
}

/* ---- Sidebar nav (dashboard) ---- */
.tutor-dashboard-permalinks a:hover,
.tutor-dashboard-permalinks li a:hover,
.tutor-dashboard-left-menu .tutor-dashboard-permalinks li a:hover {
  color: #fff;
}
.tutor-dashboard-left-menu,
.tutor-dashboard-menu-divider,
.tutor-frontend-dashboard-header {
  border-color: var(--border) !important;
}

/* ================= Buttons: match the header gradient pill ================= */
.tutor-btn-primary,
.tutor-add-to-cart-button,
.tutor-btn.tutor-btn-primary,
button.tutor-add-to-cart-button {
  background: var(--grad-soft) !important;
  border: none !important;
  border-radius: 100px !important;
  color: #fff !important;
  box-shadow: 0 12px 36px rgba(168, 85, 247, 0.4) !important;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.tutor-btn-primary:hover,
.tutor-add-to-cart-button:hover,
.tutor-btn.tutor-btn-primary:hover {
  box-shadow: 0 18px 50px rgba(168, 85, 247, 0.6) !important;
  color: #fff !important;
}
.tutor-add-to-cart-button .tutor-icon-cart-line,
.tutor-btn-primary i {
  color: #fff !important;
}

/* Outline / secondary buttons -> theme glass pill */
.tutor-btn-outline-primary,
.tutor-woocommerce-view-cart,
.tutor-btn.tutor-btn-outline-primary {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 100px !important;
  color: var(--text) !important;
}
.tutor-btn-outline-primary:hover,
.tutor-woocommerce-view-cart:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--violet) !important;
  color: #fff !important;
}

/* ================= Tab nav -> styled like the site header menu =================
   Plain text-link tabs, not sticky, with a subtle bottom border and some
   breathing room before the content. */
.tutor-course-details-tab .tutor-is-sticky {
  position: static !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
}
.tutor-course-details-tab .tutor-nav,
.tutor-nav {
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 12px !important;
  margin-bottom: 28px !important;
  border-bottom: 1px solid var(--border) !important;
}
.tutor-nav-link,
.tutor-nav > li > a {
  color: var(--text-2) !important;
  border-radius: 9px !important;
  padding: 9px 14px !important;
  font-weight: 500 !important;
}
.tutor-nav-link:hover,
.tutor-nav > li > a:hover {
  color: #fff !important;
  background-color: var(--surface) !important;
}
.tutor-nav-link.is-active,
.tutor-nav > li > a.is-active {
  color: var(--violet-l) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs)
  .tutor-nav-link.is-active {
  border-bottom-color: var(--violet) !important;
}
/* Boxed-tabs variant (used on some dashboard screens) */
.tutor-nav-tabs {
  background-color: transparent !important;
  border-bottom-color: var(--border) !important;
}
.tutor-nav-tabs .tutor-nav-link {
  border-right-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}
.tutor-nav-tabs .tutor-nav-link.is-active {
  background-color: var(--surface-2) !important;
  border-top-color: var(--violet) !important;
  border-bottom-color: var(--surface-2) !important;
  color: #fff !important;
}
.tutor-nav-tabs-container {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* ================= Content widgets as dark cards (What Will You Learn, etc.) ================= */
.tutor-course-details-widget {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

/* ================= Modals (review, etc.) -> dark =================
   Tutor modals are appended to <body>, outside the themed page wrappers,
   so they stayed white with light text (review text was invisible). */
.tutor-modal-content,
.tutor-modal-content-white,
.tutor-modal .tutor-modal-content {
  background-color: var(--bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-2) !important;
}
.tutor-modal-content .tutor-color-black,
.tutor-modal-body .tutor-color-black,
.tutor-modal-content h1,
.tutor-modal-content h2,
.tutor-modal-content h3,
.tutor-modal-content h4 {
  color: #fff !important;
}
.tutor-modal-content .tutor-color-muted,
.tutor-modal-content .tutor-color-secondary,
.tutor-modal-content .tutor-color-subdued {
  color: var(--text-2) !important;
}
.tutor-modal .tutor-form-control,
.tutor-modal textarea,
.tutor-modal input[type='text'],
.tutor-modal input[type='email'],
.tutor-modal input[type='search'] {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.tutor-modal .tutor-form-control::placeholder {
  color: var(--muted) !important;
}
.tutor-modal-close-o,
.tutor-modal .tutor-icon-times,
.tutor-modal .tutor-modal-close {
  color: var(--text-2) !important;
}
.tutor-modal .tutor-btn-ghost {
  color: var(--text-2) !important;
}
.tutor-modal .tutor-btn-ghost:hover {
  color: #fff !important;
}

/* ================= Review list items (single-course Reviews tab) =================
   The summary card is a .tutor-card (already dark) but each review row is a
   .tutor-card-list-item with a white background, so it stayed white. */
.tutor-review-list-item,
.tutor-card-list-item {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
.tutor-review-summary {
  background: transparent !important;
}
.tutor-reviewer-name {
  color: #fff !important;
}
.tutor-review-comment {
  color: var(--text-2) !important;
}

/* ================= Course-content lesson icons: keep visible ================= */
.tutor-course-content-list-item-icon,
.tutor-course-content-list-item-status {
  color: var(--text-2) !important;
  opacity: 1 !important;
}
.tutor-course-content-list-item:hover .tutor-course-content-list-item-icon,
.tutor-course-content-list-item:hover .tutor-course-content-list-item-status,
.tutor-course-content-list-item:hover .tutor-course-content-list-item-title {
  color: #fff !important;
}

/* ================= Page breathing room (Tutor renders between header/footer) =================
   60px top/bottom on desktop, 20px on mobile. */
.tutor-course-details-page,
.tutor-wrap,
.tutor-courses-wrap,
.tutor-course-archive-wrap {
  padding: 40px 0;
}
@media (max-width: 768px) {
  .tutor-course-details-page,
  .tutor-wrap,
  .tutor-courses-wrap,
  .tutor-course-archive-wrap {
    padding: 20px;
  }
}

/* ================= Active dashboard menu item -> gradient pill ================= */
.tutor-dashboard-permalinks li.active a,
.tutor-dashboard-left-menu .tutor-dashboard-permalinks li.active a {
  background: var(--grad-soft) !important;
  color: #fff !important;
}

/* ================= Dashboard data tables (My Courses, etc.) =================
   These render as a white table without a .tutor-card wrapper. Make the table
   itself a dark card so the course-name links stop being white-on-white. */
.tutor-dashboard-content-inner {
  background: transparent !important;
}
.tutor-table {
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  color: var(--text-2) !important;
}
.tutor-table thead th,
.tutor-table > thead > tr > th {
  background-color: var(--surface-2) !important;
  color: #fff !important;
  border-color: var(--border) !important;
}
.tutor-table td,
.tutor-table th,
.tutor-table tr {
  border-color: var(--border) !important;
}
.tutor-table tbody td,
.tutor-table > tbody > tr > td {
  background: transparent !important;
  color: var(--text-2) !important;
}
.tutor-table a {
  color: var(--text-2) !important;
}
.tutor-table a:hover {
  color: var(--violet-l) !important;
}

/* ================= TinyMCE / wp_editor (profile "Bio") ================= */
.wp-editor-wrap,
.wp-editor-container,
.mce-tinymce.mce-container {
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.mce-panel {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}
.mce-toolbar-grp,
.mce-menubar,
.mce-statusbar,
.wp-editor-tools,
.quicktags-toolbar {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
.mce-btn {
  background: transparent !important;
}
.mce-btn button,
.mce-ico,
.mce-menubtn span,
.mce-txt {
  color: var(--text-2) !important;
}
.mce-btn:hover,
.mce-btn.mce-active {
  background: var(--surface) !important;
}
.mce-statusbar .mce-path-item {
  color: var(--text-2) !important;
}
.wp-editor-area,
textarea.wp-editor-area {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.quicktags-toolbar input.button {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ================= Select dropdowns ================= */
/* Native selects: violet accent + dark option list */
select {
  accent-color: var(--violet);
}
select option {
  background-color: var(--bg2);
  color: var(--text);
}
select option:checked {
  background: var(--violet) !important;
  color: #fff !important;
}

/* Tutor custom select + select2: dark panel, subtle border, violet selected */
.tutor-form-select-dropdown,
.tutor-form-select-options,
.tutor-dropdown,
.select2-dropdown {
  background-color: var(--bg2) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.tutor-form-select-option,
.tutor-dropdown a,
.tutor-dropdown li,
.select2-results__option {
  color: var(--text-2) !important;
}
.tutor-form-select-option:hover,
.tutor-dropdown a:hover,
.select2-results__option--highlighted {
  background-color: var(--surface) !important;
  color: #fff !important;
}
.tutor-form-select-option.is-active,
.select2-results__option[aria-selected='true'] {
  background: var(--violet) !important;
  color: #fff !important;
}
.tutor-form-select-dropdown .tutor-form-control,
.tutor-form-select-search input {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ================= Light bg utilities + card headers -> dark =================
   e.g. the course Announcements card uses .tutor-card-header.tutor-bg-gray-10
   (light), which left its title/author white-on-white. */
.tutor-bg-white {
  background-color: var(--surface) !important;
}
.tutor-bg-gray-10,
.tutor-bg-gray-20 {
  background-color: var(--surface-2) !important;
}
.tutor-card-header {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}
.tutor-card-header .tutor-color-black,
.tutor-card-header b,
.tutor-card-title {
  color: #fff !important;
}

/* ================= Course spotlight (lesson player) ================= */
/* Box the player to the page width instead of full-bleed, like other pages. */
.tutor-course-single-content-wrapper {
  background-color: var(--bg) !important;
  max-width: 1300px;
  margin: 32px auto !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}
.tutor-course-single-content-wrapper
  #tutor-single-entry-content
  .tutor-course-topic-single-footer {
  border-radius: 0 0 var(--radius) 0;
}
/* Round the children's outer corners instead of clipping the wrapper, so the
   header's close (X) button is never cut off. */
.tutor-course-single-sidebar-wrapper {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.tutor-course-topic-single-header {
  border-top-right-radius: var(--radius);
}
/* Padding so the quiz info/table don't touch the edges + space at the bottom. */
.tutor-quiz-single-wrap,
.tutor-quiz-wrapper,
.tutor-quiz-content {
  padding: 8px 32px 40px !important;
}

/* ================= Course archive: move duration to top-right ================= */
.tutor-courses-wrap .tutor-card-body {
  position: relative;
}
.tutor-courses-wrap .tutor-card-body .tutor-meta.tutor-mt-12 {
  position: absolute;
  top: 22px;
  right: 24px;
  margin: 0 !important;
}

/* ================= Course archive: glossy filter sidebar cards ================= */
.tutor-courses-wrap .tutor-widget:not(.tutor-widget-search) {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 22px 24px !important;
  margin: 0 0 20px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tutor-courses-wrap .tutor-widget-title {
  color: #fff !important;
  margin-bottom: 14px !important;
}
.tutor-courses-wrap .tutor-widget-content,
.tutor-courses-wrap .tutor-widget-content label {
  color: var(--text-2) !important;
}

/* Course-card footer buttons (Add to cart / Continue / Start) -> gradient pill */
.tutor-courses-wrap .tutor-card-footer .tutor-btn {
  background: var(--grad-soft) !important;
  border: none !important;
  border-radius: 100px !important;
  color: #fff !important;
  box-shadow: 0 12px 36px rgba(168, 85, 247, 0.4) !important;
  transition: box-shadow 0.25s ease;
}
.tutor-courses-wrap .tutor-card-footer .tutor-btn:hover {
  box-shadow: 0 18px 50px rgba(168, 85, 247, 0.6) !important;
  color: #fff !important;
}
.tutor-courses-wrap .tutor-card-footer .tutor-btn i,
.tutor-courses-wrap .tutor-card-footer .tutor-btn [class*='tutor-icon'] {
  color: #fff !important;
}
.tutor-course-topic-single-header {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: #fff !important;
}
/* Lesson sidebar */
.tutor-course-single-sidebar-wrapper {
  background-color: var(--bg) !important;
  border-right-color: var(--border) !important;
}
.tutor-course-single-sidebar-title {
  background-color: var(--bg2) !important;
  border-bottom-color: var(--border) !important;
  color: #fff !important;
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-header {
  background-color: var(--surface-2) !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}
.tutor-course-single-sidebar-wrapper .tutor-accordion-item-body {
  background-color: transparent !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a,
.tutor-course-single-sidebar-wrapper .tutor-course-topic-title {
  background-color: transparent !important;
  color: #dcd6f2 !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item a:hover {
  background-color: var(--surface) !important;
  color: #fff !important;
}
.tutor-course-single-sidebar-wrapper .tutor-course-topic-item.is-active a,
.tutor-course-single-sidebar-wrapper
  .tutor-course-topic-item.is-active
  a
  .tutor-course-topic-title {
  background-color: var(--surface) !important;
  color: var(--violet-l) !important;
}

/* ---- Plyr video player -> brand violet ---- */
.plyr {
  --plyr-color-main: #8b5cf6 !important;
  --plyr-video-control-color: #fff !important;
  --plyr-video-control-color-hover: #fff !important;
  --plyr-range-fill-background: #8b5cf6 !important;
  --plyr-video-control-background-hover: rgba(139, 92, 246, 0.85) !important;
}
.plyr__control--overlaid {
  background: var(--violet) !important;
}

/* ================= Restore list markers in rich content =================
   The theme resets ul/ol to list-style:none for nav/footer menus, which also
   strips bullets from WYSIWYG lesson/announcement content. Put them back for
   the content areas (WYSIWYG lists have no class; nav lists do). */
.tutor-course-spotlight-tab ul,
.tutor-course-details-content ul:not([class]),
.tutor-announcement-content ul:not([class]),
.tutor-quiz-question ul:not([class]) {
  list-style: disc !important;
  padding-left: 1.6em;
  margin: 0 0 1em;
}
.tutor-course-spotlight-tab ol,
.tutor-course-details-content ol:not([class]),
.tutor-announcement-content ol:not([class]),
.tutor-quiz-question ol:not([class]) {
  list-style: decimal !important;
  padding-left: 1.6em;
  margin: 0 0 1em;
}
.tutor-course-spotlight-tab li,
.tutor-course-details-content li {
  margin-bottom: 0.35em;
}

/* ================= Quiz screens ================= */
/* Start-quiz card: Tutor hardcodes a #c0c3cb border and no background. */
.tutor-start-quiz-wrapper {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.tutor-quiz-wrapper,
.tutor-quiz-single-wrap {
  color: var(--text-2);
}
/* Secondary buttons inside attempt tables (e.g. "Details") -> theme glass */
.tutor-table .tutor-btn:not(.tutor-btn-primary) {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-2) !important;
  color: var(--text) !important;
}
.tutor-table .tutor-btn:not(.tutor-btn-primary):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.tutor-widget.tutor-widget-search {
  margin-bottom: 20px;
}
/* ---- Logged-out login / registration screens (centered card) ---- */
.tutor-page-wrap {
  padding: 64px 20px 88px;
}
.tutor-login-wrap {
  max-width: 480px;
  margin: 0 auto;
}
#tutor-registration-wrap {
  max-width: 720px;
  margin: 0 auto;
}
.tutor-login-form-wrapper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 34px;
}
.tutor-login-wrap .tutor-color-black,
#tutor-registration-wrap .tutor-color-black {
  color: #fff !important;
}
.tutor-login-wrap .tutor-login-form-wrapper > .tutor-fs-5 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}
#tutor-registration-wrap .tutor-form-row {
  display: flex;
  justify-content: space-between;
}
#tutor-registration-wrap .tutor-form-col-6 {
  width: 48%;
}
.tutor-form-group input[type='text'],
.tutor-form-group input[type='password'],
.tutor-form-group input:not([type='submit']):focus,
input#email,
select#billing-country,
input#billing-address_1,
input#billing-address_2,
input#billing-city,
input#billing-postcode,
input#billing-phone,
input#billing-first_name,
input#billing-last_name {
  width: 100%;
  font-size: 16px;
  line-height: 48px;
  transition: all 0.3s;
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--bn);
}
#tutor-registration-wrap .tutor-btn {
  padding: 15px 16px;
}