.meetinghub-wrapper {
  padding: 40px 0;
  text-align: center;
  width: 100%;
}

/* Style for the container */
.meetinghub-wrapper .meeting-not-started {
  text-align: center;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 400px;
  background-color: #f8f8f8;
}

/* Style for the headings */
.meetinghub-wrapper .meeting-not-started h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 10px;
}

.meetinghub-wrapper .meeting-not-started h4 {
  color: #555;
  font-size: 18px;
}

.meetinghub-wrapper .meeting-thumbnail {
  margin-bottom: 30px;
}

.meetinghub-wrapper .meeting-details {
  margin-bottom: 30px;
}

.meetinghub-wrapper .meeting-thumbnail img {
  width: 100%;
  height: auto;
}

.mhub_time_to_start {
  margin-bottom: 20px;
}

.mhub-countdown-value {
  font-weight: bold;
  font-size: 20px;
}

.meetinghub_start_time {
  display: flex;
  justify-content: center;
}

.mhub-countdown-wrapper {
  margin-right: 25px;
}

#sub-frame-error-details {
  display: none !important;
  visibility: hidden !important;
}


.mhub-single-widget {
  background-color: white;
  border: 1px solid rgb(226, 228, 231);
  border-radius: 8px;
  overflow: hidden;
}

.mhub-single-widget+.mhub-single-widget {
  margin-top: 32px;
}

.meetinghub-wrapper-flex {
  display: flex;
}

.mhub-widget-title {
  background-color: #3a3a3a;
  font-size: 24px !important;
  line-height: 32px !important;
  padding: 6px 16px !important;
  margin: 0 !important;
  color: #fff !important;
}

.mhub-widget-inner {
  padding: 16px;
}

.mhub-single-widget-detail dl {
  margin: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: 400;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}



.mhub-single-widget-detail dl dt {
  font-size: 18px;
  font-weight: 600;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

.mhub-single-widget-detail dl dd {
  font-size: 16px;
  margin: 0 1.5em 1em;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  font-style: inherit;
  font-weight: 400;
  border: 0;
}

.mhub-single-widget-detail dd:last-child {
  margin-bottom: 0;
}

.mhub-countdown {
  display: flex;
  flex-wrap: wrap;
}

.mhub-countedown-block {
  flex-grow: 1;
  line-height: 1;
  font-weight: 700;
  font-size: 22px;
  justify-content: space-between;
}

.mhub-countdown-label {
  display: block;
  line-height: 1;
  font-weight: 400;
  font-size: 14px;
  margin-top: 5px;
}

.mhub-single-widget-host-actions p {
  margin: 10px 0 0 !important;
  font-size: 14px;
}

.mhub-buy-btn {
  display: block;
  max-width: 180px;
  text-align: center;
  margin: 0;
  background: #ff631a;
  color: #fff;
  padding: 15px 25px;
  text-decoration: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: bold;
}

.mhub-meeting-add-to {
  border: 1px solid #e2e4e7;
  display: block;
  border-radius: 8px;
  line-height: 24px;
  font-size: 18px;
  transition: all 0.3s ease;
  padding: 10px 16px;
}

.mhub-meeting-add-to:hover {
  background-color: #7856fb;
  border-color: #7856fb;
}

.mhub-meeting-add-to svg {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  fill: #666666;
  transition: all 0.3s ease;
}

.mhub-meeting-add-to span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  color: #666666;
  transition: all 0.3s ease;
  text-transform: capitalize;
}

.mhub-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 0 -9px;
}

.mhub-form-col {
  flex: 0 0 33.333333%;
  padding: 0 9px;
}

.form-message {
  margin: 0 0 15px;
  color: white;
  padding: 4px 15px;
  font-size: 14px;
  background-color: #f39c12;
}

.form-message:empty {
  display: none;
}

.form-message.form-error {
  background-color: #e74c3c;
}

.form-message.form-success {
  background-color: #27ae60;
}

.device-status {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 14px;
  line-height: 20px;
  padding: 6px;
  text-align: center;
}

.device-status-error {
  align-items: flex-start;
  background-color: #f8ae1a;
  border-radius: 8px;
  color: #040404;
  padding: 12px 16px;
  text-align: left;
}

.device-icon {
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  width: 16px;
}

.device-status span {
  margin-left: 16px;
}

.mhub-wrapper iframe+iframe {
  display: none;
}

.mhub-group-meeting-form {
  border: 1px solid #e8e8e8;
  padding: 30px;
  text-align: center;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
  background-color: white;
  border-radius: 8px;
  margin-bottom: 35px;
}

.mhub-group-meeting-form [type='submit'] {
  font-family: inherit !important;
  font-size: medium !important;
  color: #fff !important;
  background-color: #ef5455 !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  font-style: normal;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  display: inline-block !important;
  line-height: 1.3 !important;
  border: 1px solid #ef5455 !important;
  outline: 0 !important;
  vertical-align: middle !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.2s linear;
}

.meetinghub-wrapper .mhub-col-4 {
  width: calc((100% / 12)* 4);
  padding: 0 16px;
  /* float: left; */
}

.meetinghub-wrapper .mhub-sidebar-col {
  width: calc((100% / 12)* 4);
  padding: 0 16px;
  /* float: left; */
}

.meetinghub-wrapper .mhub-meeting-col {
  width: calc((100% / 12)* 8);
  padding: 0 16px;
  /* float: left; */
}

.meetinghub-wrapper .mhub-col-8 {
  width: calc((100% / 12)* 8);
  padding: 0 16px;
  /* float: left; */
}

.meetinghub-wrapper .mhub-col-12 {
  width: calc((100% / 12)* 12);
  padding: 0 16px;
  /* float: left; */
}

.meetinghub-wrapper .mhub-shortcode-widget {
  margin-top: 40px;
}

/* General styling */
.mhub-meeting-section {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mhub-meeting-section .mhub-meeting-section-title {
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.mhub-meeting-section .mhub-meeting-form-wrapper {
  max-width: 610px;
  margin: 0 auto;
}

/* Form styling */
.mhub-meeting-section .mhub-meeting-form {
  margin-bottom: 20px;
}

.mhub-meeting-section .mhub-form-group {
  margin-bottom: 15px;
}

.mhub-meeting-section .mhub-input-wrapper {
  width: 100%;
}

.mhub-meeting-section .mhub-form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
  color: #666;
  text-align: left;
}

.mhub-meeting-section .mhub-form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.mhub-meeting-section .mhub-form-input:focus {
  border-color: #046bd2;
  outline: none;
}

.mhub-meeting-section .mhub-btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
}

.mhub-meeting-section .mhub-btn-primary {
  background-color: #046bd2;
  color: #fff;
}

.mhub-meeting-section .mhub-btn-primary:hover {
  background-color: #045cb4;
}

.mhub-meeting-section .mhub-btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

.mhub-meeting-section .mhub-btn-secondary:hover {
  background-color: #242527;
}

.mhub-meeting-section .mhub-separator {
  margin-bottom: 20px;
  font-size: 16px;
  color: #666;
  text-align: left;
}

.error-message {
  color: #ff0000;
  /* Red color for error messages */
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 500;
}

.mhub-form-error-message {
  color: #ff0000;
  /* Red color for error messages */
  font-size: 14px;
  margin-top: 5px;
  font-weight: 500;
  text-align: left;
  margin-left: 5px;
  margin-bottom: 0;
}

.mhub-form-error-message.top {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 0;
  text-align: center;
}

.error-message.top {
  font-size: 16px;
  font-weight: 600;
}

.success-message {
  color: #008000;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 600;
}

.mhub_form_success-message {
  color: #008000;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 600;
  text-align: center;
}

/* Checkout page */

.woocommerce-page.woocommerce-checkout form #order_review th.title {
  text-align: left !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  line-height: 1.3em !important;
}

a.mhub-buy-button {
  display: inline-block;
  background-color: #D55603;
  color: white;
  padding: 10px 0px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
  width: 100%;
}

/* Button hover effect */
a.mhub-buy-button:hover {
  background-color: #A04104;
  color: white;
}

/* Custom CSS for meeting details */
.mhub-singal-product-details {
  background-color: #f9f9f9;
  border: 1px solid #e5e5e5;
  padding: 20px;
  margin-top: 20px;
}


.mhub-singal-product-details ul {
  list-style-type: none;
  padding: 0;
  font-size: 17px;
}

.mhub-singal-product-details ul li {
  margin-bottom: 10px;
}

.mhub-singal-product-details ul li strong {
  font-weight: bold;
  margin-right: 5px;
}


/* My account meeting tab */

/* Table styles */
.mhub-meeting-orders-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.mhub-meeting-orders-table th,
.mhub-meeting-orders-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* Table header styles */
.mhub-meeting-orders-table th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
}

/* Table body styles */
.mhub-meeting-orders-table td {
  color: #666;
}

/* Table body row hover effect */
.mhub-meeting-orders-table tbody tr:hover {
  background-color: #f9f9f9;
}

/* Actions link styles */
.mhub-meeting-orders-table tbody td a {
  color: #7856fb;
  text-decoration: none;
  font-weight: 600;
}

.mhub-meeting-orders-table tbody td a:focus {
  outline: none !important;

}

.mhub-meeting-orders-table tbody td a:hover {
  text-decoration: underline !important;
}

.mhub-meeting-orders-table tbody .mhub-no-meeting {
  text-align: center;
}

button.mhub-meeting-status {
  border-radius: 8px;
  background-color: #7856fb;
  padding: 10px 30px;
  color: #ffffff;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  border: none;

}

button.mhub-meeting-status:hover {
  background-color: #4f21ff;
}

/* Zoom css start*/
.meetinghub-zoom-join-links {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mhub-shortcode-zoom-join-links {
  padding: 40px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.meetinghub-button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #7856fb;
}

.meetinghub-zoom-join-web {
  background-color: transparent;
  color: #7856fb;
}

.meetinghub-zoom-join-web:hover {
  background-color: #7856fb;
  color: white;
}

.meetinghub-join-app {
  background-color: transparent;
  color: #7856fb;
}

.meetinghub-join-app:hover {
  background-color: #7856fb;
  color: white;
}

/* Zoom cs end */

/* Webex meeting start */
.mhub-webex-join-links,
.mhub-google-meet-join-links {
  margin-bottom: 40px;
}

.mhub-webex-st-join-links,
.mhub-google-meet-st-join-links {
  padding: 40px 10px;
}

.meetinghub-webex-button,
.meetinghub-google-meet-button {
  display: inline-block;
  padding: 10px 100px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #7856fb;
}

.mhub-webex-join,
.mhub-google-meet-join {
  background-color: transparent;
  color: #7856fb;
}

.mhub-webex-join:hover,
.mhub-google-meet-join:hover {
  background-color: #7856fb;
  color: white;
}

.webex-agenda-title {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

.webex-agenda-desc {
  font-size: 14px;
}

/* Webinar registration notice */
.mhub-webinar-registration-notice {
  display: block;
  clear: both;
  background-color: var(--mhub-brand-100);
  border-left: 4px solid var(--mhub-brand-500);
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mhub-webinar-registration-notice p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  font-weight: 500;
}

/* Webex-meeting end */

/* Microsoft Teams meeting start */
.mhub-msteams-join-links {
  margin-bottom: 40px;
}

.mhub-msteams-st-join-links {
  padding: 40px 10px;
}

.meetinghub-msteams-button {
  display: inline-block;
  padding: 10px 100px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #5b5fc7;
}

.mhub-msteams-join {
  background-color: transparent;
  color: #5b5fc7;
}

.mhub-msteams-join:hover {
  background-color: #5b5fc7;
  color: white;
}

/* Microsoft Teams meeting end */

@media (max-width: 860px) {
  .meetinghub-wrapper .mhub-sidebar-col {
    width: calc((100% / 12)* 12);
  }

  .meetinghub-wrapper-flex {
    display: inline-block;
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex .mhub-meeting-col {
    width: calc((100% / 12)* 11.5);
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex .mhub-sidebar-col {
    width: calc((100% / 12)* 11.5);
  }

  .meetinghub-wrapper .mhub-meeting-col {
    width: calc((100% / 12)* 12);
  }

  .meetinghub-wrapper .mhub-sidebar {
    margin-bottom: 20px;
  }
}

@media (max-width: 650px) {
  .meetinghub-button {
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 500px) {
  .meetinghub-zoom-join-links {
    display: inline-block;
  }

  .mhub-shortcode-zoom-join-links {
    display: inline-block;
  }

  .meetinghub-button {
    padding: 10px 0px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 20px;
  }
}

@media (max-width: 360px) {
  .meetinghub-webex-button {
    width: 100%;
    padding: 10px 50px;
  }
}

/* Add to clander */
.mhub-single-widget .calander-btn-wrapper {
  padding: 20px;
}

.mhub-add-to-calendar-btn {
  display: flex;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  background-color: #f9f9f9;
  transition: background-color 0.2s ease;
  align-items: center;
}

.mhub-add-to-calendar-btn:hover {
  background-color: #eee;
}

.calendar-title {
  margin-left: 8px;
  font-size: 18px;
  font-weight: 500;
}


.mce-toolbar .mce-i-dashicons {
  font-family: dashicons !important;
  font-size: 35px !important;
  width: auto !important;
  line-height: 20px !important;
}

.mce-window .mce-window-head .mce-close:hover {
  background: none;
  border-color: unset;
}

.mce-window .mce-window-head .mce-close:focus {
  background: none;
  border-color: unset;
}

#meeting-select-open:hover {
  background: none;
}

#mceu_13-button:hover {
  background: none;
}

.woocommerce-js select {
  padding: 0em 0.8em;
}

.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.meetings a {
  display: flex;
  align-items: center;
}

.mhub-dokan-meeting-select-wrapper {
  margin-bottom: 22px;
}

/*
 * The one control a signed-out visitor sees, so it is the plugin's whole
 * appearance to that person.
 *
 * It was #7856fb, a purple, under a comment reading "WordPress Blue". It was
 * neither: the plugin's brand is #5536E8, which is what every primary in the
 * admin wears. 6.76:1 for white on it.
 *
 * It also had hover and nothing else. A control reachable by keyboard with no
 * focus ring is invisible to the person who most needs to find it, and a 0.3s
 * transition reads as lag; 150ms is the rest of this plugin's timing.
 */
.mhub-frontend-meeting__gate {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #334155; /* 10.35:1 on white. */
}

.mhub-login-button {
  display: inline-block;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--mhub-brand-500);
  border: none;
  border-radius: 8px;
  text-align: center;
  transition: background-color 150ms ease, box-shadow 150ms ease;
  text-decoration: none !important;
}

.mhub-login-button:hover,
.mhub-login-button:focus {
  background-color: var(--mhub-brand-700); /* 8.67:1. */
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.16);
  color: #ffffff;
}

.mhub-login-button:focus-visible {
  outline: 2px solid var(--mhub-brand-500);
  outline-offset: 2px;
}

.mhub-login-button:active {
  background-color: var(--mhub-brand-800); /* 10.93:1. */
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .mhub-login-button {
    transition: none;
  }
}

/* Recording Player Styles */
.mhub-recording-player {
  margin: 30px auto;
  max-width: 900px;
  width: 100%;
}

.mhub-recording-player video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: #000;
}

.mhub-recording-message {
  text-align: center;
  margin: 50px auto;
  padding: 30px 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  max-width: 600px;
  background-color: #f9f9f9;
}

.mhub-recording-message h3 {
  color: #333;
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 600;
}

.mhub-recording-message p {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.mhub-recording-error {
  text-align: center;
  margin: 50px auto;
  padding: 30px 20px;
  border: 1px solid #ffcccb;
  border-radius: 8px;
  max-width: 600px;
  background-color: #fff5f5;
}

.mhub-recording-error h3 {
  color: #d32f2f;
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 600;
}

.mhub-recording-error p {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.mhub-recording-processing {
  text-align: center;
  margin: 50px auto;
  padding: 30px 20px;
  border: 1px solid #fff4e5;
  border-radius: 8px;
  max-width: 600px;
  background-color: #fffbf0;
}

.mhub-recording-processing h3 {
  color: #f57c00;
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: 600;
}

.mhub-recording-processing p {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mhub-recording-player {
    margin: 20px auto;
  }

  .mhub-recording-message,
  .mhub-recording-error,
  .mhub-recording-processing {
    margin: 30px 15px;
    padding: 20px 15px;
  }

  .mhub-recording-message h3,
  .mhub-recording-error h3,
  .mhub-recording-processing h3 {
    font-size: 20px;
  }

  .mhub-recording-message p,
  .mhub-recording-error p,
  .mhub-recording-processing p {
    font-size: 14px;
  }
}

/* Recording Archive Styles */
.mhub-recording-archive {
  margin: 40px 0;
  width: 100%;
}

/* Archive Wrapper with Sidebar */
.mhub-recording-archive-wrapper {
  display: flex;
  gap: 30px;
  margin: 40px 0;
}

.mhub-recording-archive-main {
  flex: 1;
  min-width: 0;
}

.mhub-recording-archive-sidebar {
  width: 300px;
  flex-shrink: 0;
}

/* Sidebar Styles */
.mhub-recording-sidebar {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mhub-recording-sidebar-title {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  padding-bottom: 15px;
  border-bottom: 2px solid #7856fb;
}

.mhub-recording-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mhub-sidebar-item {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mhub-sidebar-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mhub-sidebar-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mhub-sidebar-thumbnail-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 aspect ratio */
  background-color: #000;
  overflow: hidden;
}

.mhub-sidebar-thumbnail-wrapper.mhub-sidebar-no-thumbnail {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mhub-sidebar-thumbnail-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mhub-sidebar-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mhub-sidebar-item:hover .mhub-sidebar-play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.mhub-sidebar-title {
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  background: #f9f9f9;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mhub-recording-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 0;
}

.mhub-recording-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.mhub-recording-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mhub-recording-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 aspect ratio */
  background-color: #000;
  overflow: hidden;
}

.mhub-recording-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mhub-recording-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1 !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.mhub-recording-card:hover .mhub-recording-play-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Play overlay is handled by CSS ::before/::after pseudo-elements.
   Do NOT re-show the SVG overlay inside .mhub-recording-card-wrapper
   to avoid a double play icon. */

.mhub-recording-processing-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: #f57c00;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.mhub-recording-info {
  padding: 16px;
}

.mhub-recording-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mhub-recording-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.mhub-recording-date {
  flex: 1;
}

.mhub-recording-duration {
  font-weight: 500;
  color: #7856fb;
}

/* Lightbox Modal Styles */
.mhub-recording-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: none;
  /* Hidden by default */
  align-items: center;
  justify-content: center;
}

.mhub-recording-lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.mhub-recording-lightbox-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
  animation: mhubLightboxFadeIn 0.3s ease;
}

@keyframes mhubLightboxFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

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

.mhub-recording-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.3s ease;
}

.mhub-recording-lightbox-close:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.mhub-recording-lightbox-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 aspect ratio */
  background-color: #000;
}

.mhub-recording-lightbox-video video,
.mhub-recording-lightbox-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.mhub-recording-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  text-align: center;
}

.mhub-recording-lightbox-meta {
  padding: 24px;
  background-color: #f9f9f9;
}

.mhub-recording-lightbox-title {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.mhub-recording-lightbox-info {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
}

.mhub-recording-lightbox-date,
.mhub-recording-lightbox-duration {
  display: inline-block;
}

.mhub-recording-lightbox-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
}

.mhub-recording-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #7856fb;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.mhub-recording-download-btn:hover {
  background-color: #6344d9;
  color: #fff;
}

.mhub-recording-download-btn svg {
  width: 16px;
  height: 16px;
}

/* Error and No Recordings Messages */
.mhub-recording-error,
.mhub-no-recordings {
  text-align: center;
  padding: 40px 20px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
}

.mhub-recording-error {
  background-color: #fff5f5;
  border-color: #ffcccb;
  color: #d32f2f;
}

/* New Videos Section */
.mhub-new-videos-section {
  margin: 60px 0 40px 0;
  padding: 40px 0;
  border-top: 2px solid #e0e0e0;
}

.mhub-new-videos-title {
  margin: 0 0 30px 0;
  font-size: 28px;
  font-weight: 700;
  color: #333;
  text-align: left;
}

.mhub-new-videos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.mhub-new-video-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mhub-new-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.mhub-new-video-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mhub-new-video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 aspect ratio */
  background-color: #000;
  overflow: hidden;
}

.mhub-new-video-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mhub-new-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mhub-new-video-card:hover .mhub-new-video-play-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

.mhub-new-video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.mhub-new-video-info {
  padding: 16px;
}

.mhub-new-video-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mhub-new-video-meta {
  font-size: 13px;
  color: #666;
}

.mhub-new-video-date {
  display: block;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .mhub-recording-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .mhub-recording-archive-wrapper {
    flex-direction: column;
  }

  .mhub-recording-archive-sidebar {
    width: 100%;
  }

  .mhub-recording-sidebar-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 15px;
  }

  .mhub-sidebar-item {
    min-width: 250px;
  }

  .mhub-new-videos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .mhub-new-videos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .mhub-recording-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mhub-recording-lightbox-content {
    width: 95%;
  }

  .mhub-recording-lightbox-meta {
    padding: 16px;
  }

  .mhub-recording-lightbox-title {
    font-size: 18px;
  }

  .mhub-recording-lightbox-info {
    flex-direction: column;
    gap: 8px;
  }

  .mhub-new-videos-grid {
    grid-template-columns: 1fr;
  }

  .mhub-new-videos-title {
    font-size: 24px;
  }
}


/* Recording Information Modal Styles */
.mhub-recording-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
}

.mhub-recording-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.mhub-recording-modal-content {
  position: relative;
  width: 90%;
  max-width: 560px;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  z-index: 1;
  animation: mhubModalFadeIn 0.3s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

@keyframes mhubModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

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

.mhub-recording-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  z-index: 2;
  transition: all 0.25s ease;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  font-size: 0;
  line-height: 1;
  border-radius: 0;
  opacity: 0.8;
}

.mhub-recording-modal-close::before,
.mhub-recording-modal-close::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 1px;
  transition: all 0.25s ease;
}

.mhub-recording-modal-close::before {
  transform: rotate(45deg);
}

.mhub-recording-modal-close::after {
  transform: rotate(-45deg);
}

.mhub-recording-modal-close:hover {
  opacity: 1;
  transform: scale(1.15);
}

.mhub-recording-modal-close:focus {
  outline: none !important;
  box-shadow: none !important;
}

.mhub-recording-modal-header {
  padding: 36px 32px 20px 32px;
  background: linear-gradient(135deg, #7856fb 0%, #6344d9 100%);
  border-bottom: none;
}

.mhub-recording-modal-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  padding-right: 40px;
  line-height: 1.4;
}

.mhub-recording-modal-body {
  padding: 28px 32px 32px 32px;
}

.mhub-recording-modal-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.mhub-recording-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
  background-color: #f8f9fb;
  border-radius: 10px;
}

.mhub-recording-info-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #7856fb;
}

.mhub-recording-info-item div {
  flex: 1;
}

.mhub-recording-info-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.mhub-recording-info-item span {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.mhub-recording-modal-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.mhub-recording-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.mhub-recording-btn svg {
  width: 18px;
  height: 18px;
}

.mhub-recording-btn-primary {
  background: linear-gradient(135deg, #7856fb 0%, #6344d9 100%);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(120, 86, 251, 0.25);
}

.mhub-recording-btn-primary:hover {
  background: linear-gradient(135deg, #5233c7 0%, #4122b5 100%);
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(120, 86, 251, 0.4);
}

.mhub-recording-btn-primary:focus {
  outline: none;
  text-decoration: none !important;
}

.mhub-recording-btn-secondary {
  background-color: #f0f2f5;
  color: #333 !important;
  border: 2px solid #e0e3e8;
}

.mhub-recording-btn-secondary:hover {
  background-color: #7856fb;
  color: #fff !important;
  border-color: #7856fb;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(120, 86, 251, 0.3);
}

.mhub-recording-btn-secondary:focus {
  outline: 3px solid rgba(120, 86, 251, 0.3);
  outline-offset: 2px;
  text-decoration: none !important;
}

.mhub-recording-modal-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background-color: #f0f7ff;
  border-radius: 10px;
  border-left: 4px solid #7856fb;
}

.mhub-recording-modal-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #7856fb;
}

.mhub-recording-modal-note p {
  margin: 0;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

/* Passcode Display */
.mhub-recording-modal-passcode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: 12px;
  border: 1px solid #fcd34d;
  margin-bottom: 20px;
}

.mhub-passcode-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mhub-passcode-left svg {
  flex-shrink: 0;
  color: #b45309;
}

.mhub-passcode-label {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
  white-space: nowrap;
}

.mhub-recording-modal-passcode code {
  font-size: 15px;
  font-weight: 700;
  color: #78350f;
  background: rgba(180, 83, 9, 0.1);
  padding: 5px 14px;
  border-radius: 8px;
  letter-spacing: 1.5px;
  font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
  user-select: all;
  border: 1px solid rgba(180, 83, 9, 0.15);
}

.mhub-recording-copy-passcode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d97706;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  color: #b45309;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mhub-recording-copy-passcode:hover {
  background: #d97706;
  color: #fff;
  border-color: #d97706;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

.mhub-recording-copy-passcode.copied {
  background: #059669;
  border-color: #059669;
  color: #fff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

.mhub-recording-copy-passcode svg {
  width: 14px;
  height: 14px;
}

/* Responsive Modal Styles */
@media (max-width: 768px) {
  .mhub-recording-modal-content {
    width: 95%;
    max-width: none;
  }

  .mhub-recording-modal-header {
    padding: 24px 24px 16px 24px;
  }

  .mhub-recording-modal-title {
    font-size: 20px;
  }

  .mhub-recording-modal-body {
    padding: 24px;
  }

  .mhub-recording-modal-actions {
    flex-direction: column;
  }

  .mhub-recording-btn {
    width: 100%;
  }
}

/* Meeting Header Styles - Professional Design with Clean Icons */
.mhub-meeting-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
  border-radius: 16px;
  padding: 0;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8ecf4;
  overflow: hidden;
}

.mhub-meeting-header-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 40px 32px 40px;
  background: linear-gradient(135deg, #7856fb 0%, #6344d9 100%);
  position: relative;
}

.mhub-meeting-header-top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
}

.mhub-meeting-header-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mhub-meeting-header-icon svg {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.mhub-meeting-header-icon svg rect {
  fill: rgba(255, 255, 255, 0.15);
}

.mhub-meeting-header-icon svg path,
.mhub-meeting-header-icon svg circle {
  fill: #ffffff;
}

.mhub-meeting-header-title-section {
  flex: 1;
  min-width: 0;
}

.mhub-meeting-header-title {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mhub-meeting-header-subtitle {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.mhub-meeting-header-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  padding: 0;
  background: #ffffff;
  border-bottom: 1px solid #e8ecf4;
}

.mhub-meeting-meta-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  background: #ffffff;
  border-right: 1px solid #e8ecf4;
  transition: all 0.3s ease;
  position: relative;
}

.mhub-meeting-meta-card:last-child {
  border-right: none;
}

.mhub-meeting-meta-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7856fb 0%, #6344d9 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.mhub-meeting-meta-card:hover {
  background: #f8f9fc;
}

.mhub-meeting-meta-card:hover::before {
  transform: scaleX(1);
}

.mhub-meeting-meta-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7856fb;
}

.mhub-meeting-meta-icon svg {
  width: 24px;
  height: 24px;
}

.mhub-meeting-meta-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.mhub-meeting-meta-label {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.mhub-meeting-meta-value {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mhub-meeting-header-section {
  padding: 28px 40px;
  background: #ffffff;
  border-top: 1px solid #e8ecf4;
}

.mhub-meeting-header-section:first-of-type {
  border-top: none;
}

.mhub-meeting-header-section:last-child {
  padding-bottom: 32px;
}

.mhub-meeting-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
}

.mhub-meeting-section-title svg {
  width: 20px;
  height: 20px;
  color: #7856fb;
  flex-shrink: 0;
}

.mhub-meeting-section-content {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.7;
}

.mhub-meeting-section-content p {
  margin: 0 0 12px 0;
}

.mhub-meeting-section-content p:last-child {
  margin-bottom: 0;
}

.mhub-meeting-section-content ul,
.mhub-meeting-section-content ol {
  margin: 0 0 12px 0;
  padding-left: 24px;
}

.mhub-meeting-section-content li {
  margin-bottom: 8px;
}

.mhub-meeting-section-content strong {
  color: #1f2937;
  font-weight: 600;
}

/* Recording Archive Container */
.mhub-recording-archive-container {
  margin: 40px 0;
  width: 100%;
}

/* Responsive Meeting Header */
@media (max-width: 1024px) {
  .mhub-meeting-header-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mhub-meeting-meta-card:nth-child(2n) {
    border-right: none;
  }

  .mhub-meeting-meta-card:nth-child(n+3) {
    border-top: 1px solid #e8ecf4;
  }
}

@media (max-width: 768px) {
  .mhub-meeting-header {
    margin-bottom: 32px;
  }

  .mhub-meeting-header-top {
    padding: 32px 28px 24px 28px;
    gap: 16px;
  }

  .mhub-meeting-header-icon {
    width: 56px;
    height: 56px;
  }

  .mhub-meeting-header-icon svg {
    width: 56px;
    height: 56px;
  }

  .mhub-meeting-header-title {
    font-size: 26px;
  }

  .mhub-meeting-header-subtitle {
    font-size: 14px;
  }

  .mhub-meeting-header-meta-grid {
    grid-template-columns: 1fr;
  }

  .mhub-meeting-meta-card {
    padding: 20px 28px;
    border-right: none;
    border-bottom: 1px solid #e8ecf4;
  }

  .mhub-meeting-meta-card:last-child {
    border-bottom: none;
  }

  .mhub-meeting-meta-card:nth-child(n+2) {
    border-top: none;
  }

  .mhub-meeting-meta-icon {
    width: 22px;
    height: 22px;
  }

  .mhub-meeting-meta-icon svg {
    width: 22px;
    height: 22px;
  }

  .mhub-meeting-meta-label {
    font-size: 10px;
  }

  .mhub-meeting-meta-value {
    font-size: 14px;
  }

  .mhub-meeting-header-section {
    padding: 24px 28px;
  }

  .mhub-meeting-header-section:last-child {
    padding-bottom: 28px;
  }

  .mhub-meeting-section-title {
    font-size: 17px;
    margin-bottom: 14px;
  }

  .mhub-meeting-section-title svg {
    width: 18px;
    height: 18px;
  }

  .mhub-meeting-section-content {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mhub-meeting-header-top {
    padding: 28px 24px 20px 24px;
  }

  .mhub-meeting-header-icon {
    width: 48px;
    height: 48px;
  }

  .mhub-meeting-header-icon svg {
    width: 48px;
    height: 48px;
  }

  .mhub-meeting-header-title {
    font-size: 22px;
  }

  .mhub-meeting-meta-card {
    padding: 18px 24px;
  }

  .mhub-meeting-header-section {
    padding: 20px 24px;
  }

  .mhub-meeting-header-section:last-child {
    padding-bottom: 24px;
  }

  .mhub-meeting-section-title {
    font-size: 16px;
  }
}


/* ========================================
   YouTube-Style Archive Layout
   ======================================== */

/* Container with YouTube layout */
.mhub-youtube-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* Title Bar - Horizontal section with both titles */
.mhub-archive-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0;
  gap: 24px;
  position: relative;
  margin-bottom: 16px;

}

.mhub-archive-title-bar .mhub-section-title {
  margin: 0;
  padding: 0 0 16px 0;
  border: none;
  min-height: auto;
  position: relative;
}

.mhub-featured-title {
  flex: 0 0 calc(70% - 12px);
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.3px;
}

.mhub-featured-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px 3px 0 0;
}

.mhub-sidebar-title-bar {
  flex: 0 0 calc(30% - 12px);
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.3px;
}

.mhub-sidebar-title-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7856fb 0%, #6344d9 100%);
  border-radius: 3px 3px 0 0;
}

/* Top Section: Featured + Sidebar */
.mhub-archive-top-section {
  display: flex;
  gap: 24px;
  margin-top: 0;
  margin-bottom: 40px;
  align-items: flex-start;
}

/* Featured Recording (Left - 70%) */
.mhub-featured-recording {
  flex: 0 0 calc(70% - 12px);
  display: flex;
  flex-direction: column;
}

.mhub-featured-recording .mhub-featured-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.mhub-featured-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.mhub-featured-thumbnail {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  background: #000;
  cursor: pointer;
}

.mhub-featured-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mhub-featured-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.mhub-featured-thumbnail:hover .mhub-featured-play-overlay {
  transform: translate(-50%, -50%) scale(1.1);
}

.mhub-featured-info {
  padding: 24px;
  background: linear-gradient(to bottom, #ffffff 0%, #f8f9fc 100%);
}

.mhub-featured-card .mhub-featured-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #1a1a1a;
  line-height: 1.4;
}

.mhub-featured-card .mhub-featured-title::after {
  display: none;
}

.mhub-featured-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 0;
  font-size: 14px;
  color: #606060;
}

.mhub-featured-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mhub-featured-meta span::before {
  content: '';
  width: 4px;
  height: 4px;
  background: #606060;
  border-radius: 50%;
  display: inline-block;
}

.mhub-featured-meta span:first-child::before {
  display: none;
}

.mhub-featured-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #7856fb;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.mhub-featured-watch-btn:hover {
  background: #6344d9;
}

/* Sidebar (Right - 30%) */
.mhub-recordings-sidebar {
  flex: 0 0 calc(30% - 12px);
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border: 1px solid #e8ecf4;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

/* Remove the old sidebar title since it's now in the title bar */
.mhub-sidebar-title {
  display: none;
}

/* Section Title - Common styling */
.mhub-section-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #1a1a1a;
  padding-bottom: 12px;
  border-bottom: 2px solid #e0e0e0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.mhub-sidebar-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #1a1a1a;
  padding-bottom: 12px;
  border-bottom: 3px solid #7856fb;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.mhub-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mhub-sidebar-item {
  background: #f8f9fc;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e8ecf4;
}

.mhub-sidebar-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(120, 86, 251, 0.15);
  border-color: #7856fb;
  background: #fff;
}

.mhub-sidebar-link {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  padding: 8px;
}

.mhub-sidebar-thumbnail {
  position: relative;
  flex: 0 0 140px;
  height: 80px;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.mhub-sidebar-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mhub-sidebar-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.mhub-sidebar-info {
  flex: 1;
  padding: 4px 8px 4px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.mhub-sidebar-info h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #1a1a1a;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.mhub-sidebar-item:hover .mhub-sidebar-info h4 {
  color: #7856fb;
}

.mhub-sidebar-info .mhub-sidebar-date {
  font-size: 12px;
  color: #606060;
  font-weight: 500;
}

/* All Recordings Section (Bottom) */
.mhub-all-recordings-section {
  margin-top: 40px;
}

.mhub-all-recordings-section .mhub-section-title {
  border-bottom: 2px solid #e0e0e0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .mhub-archive-title-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .mhub-featured-title,
  .mhub-sidebar-title-bar {
    flex: 1 1 100%;
  }

  .mhub-archive-top-section {
    flex-direction: column;
  }

  .mhub-featured-recording,
  .mhub-recordings-sidebar {
    flex: 1 1 100%;
  }

  .mhub-sidebar-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 16px;
  }

  .mhub-sidebar-item {
    flex: 0 0 280px;
  }

  .mhub-sidebar-link {
    flex-direction: column;
  }

  .mhub-sidebar-thumbnail {
    flex: 0 0 auto;
    width: 100%;
    height: 158px;
  }
}

@media (max-width: 768px) {
  .mhub-youtube-layout {
    padding: 12px;
  }

  .mhub-archive-title-bar {
    gap: 8px;
    margin-bottom: 16px;
  }

  .mhub-archive-top-section {
    gap: 16px;
    margin-bottom: 24px;
  }

  .mhub-featured-title,
  .mhub-sidebar-title-bar {
    font-size: 18px;
  }

  .mhub-section-title {
    font-size: 18px;
  }
}


/* ========================================
   Play Overlay for Custom Thumbnails - YouTube Style
   ======================================== */

/* IMPORTANT: YouTube-style play button overlay for video thumbnails */
/* This creates a clean, recognizable play button that works on all thumbnails */

/* Container positioning */
.mhub-recording-thumbnail,
.mhub-featured-thumbnail,
.mhub-archive-sidebar-thumbnail {
  position: relative;
}

/* Play button overlay - Always visible on custom thumbnails */
.mhub-recording-card .mhub-recording-thumbnail::before,
.mhub-featured-card .mhub-featured-thumbnail::before,
.mhub-archive-sidebar-item .mhub-archive-sidebar-thumbnail::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Play triangle icon */
.mhub-recording-card .mhub-recording-thumbnail::after,
.mhub-featured-card .mhub-featured-thumbnail::after,
.mhub-archive-sidebar-item .mhub-archive-sidebar-thumbnail::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #fff;
  z-index: 11;
  transition: all 0.3s ease;
}

/* Smaller play button for sidebar items (Recent Recordings) */
.mhub-archive-sidebar-item .mhub-archive-sidebar-thumbnail::before {
  width: 48px;
  height: 48px;
}

.mhub-archive-sidebar-item .mhub-archive-sidebar-thumbnail::after {
  border-width: 10px 0 10px 16px;
}

/* Hover effects - Scale up and change color */
.mhub-recording-card:hover .mhub-recording-thumbnail::before,
.mhub-featured-card:hover .mhub-featured-thumbnail::before,
.mhub-archive-sidebar-item:hover .mhub-archive-sidebar-thumbnail::before {
  background-color: rgba(255, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.1);
}

.mhub-recording-card:hover .mhub-recording-thumbnail::after,
.mhub-featured-card:hover .mhub-featured-thumbnail::after,
.mhub-archive-sidebar-item:hover .mhub-archive-sidebar-thumbnail::after {
  transform: translate(-35%, -50%) scale(1.1);
}

/* Hide the old SVG play overlay - we're using CSS now */
.mhub-recording-play-overlay,
.mhub-featured-play-overlay,
.mhub-archive-sidebar-play-icon {
  display: none !important;
}

/* Duration badge positioning - ensure it's above play button */
.mhub-archive-sidebar-duration {
  z-index: 12;
}


/* ========================================
   Archive Sidebar - Custom Styles
   ======================================== */

/* Sidebar Container */
.mhub-recordings-sidebar {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  overflow: hidden;
}

/* Sidebar Title - Hidden since it's in the title bar now */
.mhub-sidebar-title {
  display: none;
}

/* Sidebar List */
.mhub-sidebar-list {
  padding: 0;
}

/* Archive Sidebar Item */
.mhub-archive-sidebar-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  margin-bottom: 12px;
}

.mhub-archive-sidebar-item:last-child {
  margin-bottom: 0;
}

.mhub-archive-sidebar-item:hover {
  background: #f8f7ff;
  border-color: #7856fb;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(120, 86, 251, 0.15);
}

/* Sidebar Thumbnail */
.mhub-archive-sidebar-thumbnail {
  position: relative;
  width: 160px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
}

.mhub-archive-sidebar-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.mhub-archive-sidebar-item:hover .mhub-archive-sidebar-thumbnail img {
  transform: scale(1.05);
}

/* Sidebar Duration Badge */
.mhub-archive-sidebar-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Sidebar Play Icon */
.mhub-archive-sidebar-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mhub-archive-sidebar-item:hover .mhub-archive-sidebar-play-icon {
  opacity: 1;
}

/* Sidebar Content */
.mhub-archive-sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.mhub-archive-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 6px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.mhub-archive-sidebar-item:hover .mhub-archive-sidebar-title {
  color: #7856fb;
}

.mhub-archive-sidebar-date {
  font-size: 12px;
  color: #666666;
  margin: 0;
}

/* Featured Actions */
.mhub-featured-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mhub-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.mhub-featured-card:hover .mhub-featured-thumbnail img {
  transform: scale(1.05);
}

.mhub-featured-title {
  transition: color 0.3s ease;
}

.mhub-featured-card:hover .mhub-featured-title {
  color: #7856fb;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mhub-archive-sidebar-thumbnail {
    width: 120px;
    height: 68px;
  }

  .mhub-archive-sidebar-title {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

  .mhub-archive-sidebar-date {
    font-size: 11px;
  }

  .mhub-featured-actions {
    flex-direction: column;
  }

  .mhub-featured-watch-btn,
  .mhub-featured-download-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .mhub-archive-sidebar-thumbnail {
    width: 100px;
    height: 56px;
  }

  .mhub-sidebar-title {
    font-size: 16px;
    padding: 16px 16px 12px;
  }

  .mhub-sidebar-list {
    padding: 8px;
  }

  .mhub-archive-sidebar-item {
    padding: 10px;
    gap: 10px;
  }
}

/* ==========================================================================
   Single meeting page
   ==========================================================================

   The public page for one meeting, on every platform: the six templates in
   includes/Templates and their sidebars. It is drawn to match the public
   booking page at /booking/<slug>/, so somebody who books a call and then
   opens the meeting sees one product rather than two: white cards on a 14px
   radius with a hairline inset edge, slate neutrals, brand #5536E8, left
   aligned facts, sentence case titles and one solid Join button.

   The values are the booking page's own, from tailwind.theme.js and
   components/booking-page/tokens.js, copied rather than shared because this
   file is plain CSS with no build step. Contrast was measured on white, as it
   was there: slate-900 #0F172A 17.85:1, slate-700 #334155 10.35:1, slate-600
   #475569 7.46:1, slate-500 #64748B 4.76:1, brand on white and white on brand
   5.44:1.

   SCOPE. Every rule starts at `.meetinghub-wrapper.meetinghub-wrapper-flex`,
   the root only these templates (and Pro's LMS copies of them) print. The
   shortcodes reuse `.meetinghub-wrapper`, `.mhub-single-widget` and the join
   button classes on somebody else's page, and they keep the older look
   untouched. Two classes deep also puts every rule here at (0,2,0) or more,
   so it outranks the single-class rules above without a specificity race.
   The few `!important`s exist only because the older widget title and
   detail rules use them and nothing else can beat them.
   ========================================================================== */

.meetinghub-wrapper.meetinghub-wrapper-flex {
  --mhub-sp-ink: #0f172a;
  --mhub-sp-text: #334155;
  --mhub-sp-muted: #475569;
  --mhub-sp-subtle: #64748b;
  --mhub-sp-wash: #f8fafc;
  --mhub-sp-wash-strong: #f1f5f9;
  --mhub-sp-brand: var(--mhub-brand-500);
  --mhub-sp-brand-hover: var(--mhub-brand-700);
  --mhub-sp-brand-active: var(--mhub-brand-800);
  --mhub-sp-brand-wash: var(--mhub-brand-100);
  --mhub-sp-good: #15803d;
  --mhub-sp-danger: #b42318;
  --mhub-sp-danger-wash: #fef3f2;
  --mhub-sp-hair: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  --mhub-sp-hair-strong: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
  --mhub-sp-panel: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --mhub-sp-raise: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 18px 40px -28px rgba(15, 23, 42, 0.28);
  --mhub-sp-brand-shadow: 0 1px 2px 0 rgb(var(--mhub-brand-500-rgb)/0.22), 0 4px 10px -3px rgb(var(--mhub-brand-500-rgb)/0.38);

  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  text-align: left;

  /*
   * Re-asserted for the same reason the booking page does it: half the text in
   * the theme's face and the rest in the system stack reads as a rendering bug.
   * System fonts, not a webfont, so the page costs no third-party request.
   */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mhub-sp-ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.meetinghub-wrapper.meetinghub-wrapper-flex *,
.meetinghub-wrapper.meetinghub-wrapper-flex *::before,
.meetinghub-wrapper.meetinghub-wrapper-flex *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------- columns -- */

/*
 * Flex with a wrap, so the two columns sit side by side while they fit and
 * stack when they do not. The 900px query below only stops the sidebar from
 * keeping its desktop width once it has wrapped under the meeting.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-meeting-col,
.meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-col-12 {
  flex: 1 1 520px;
  width: auto;
  min-width: 0;
  padding: 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--mhub-sp-raise);
}

.meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-col-12 {
  flex-basis: 100%;
}

.meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-sidebar-col {
  flex: 1 1 300px;
  width: auto;
  max-width: 360px;
  min-width: 0;
  padding: 0;
}

/* ---------------------------------------------------------------- main -- */

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-meeting-title {
  margin: 0 0 16px;
  padding: 0;
  font-family: inherit;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--mhub-sp-ink);
  text-transform: none;
  overflow-wrap: anywhere;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-thumbnail {
  margin: 0 0 20px;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 62ch, because past roughly 75 characters the eye loses the start of the next line. */
.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-details {
  max-width: 62ch;
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mhub-sp-muted);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-details > :first-child {
  margin-top: 0;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-details > :last-child {
  margin-bottom: 0;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-details:last-child {
  margin-bottom: 0;
}

/*
 * A notice, not a dialog. The rule above draws it as a grey box centred in the
 * column with 50px of margin, which on this page floated in the middle of the
 * card and read as an error. Here it sits in the flow, left aligned, like the
 * booking page's own messages.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-not-started {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: none;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--mhub-sp-wash-strong);
  box-shadow: var(--mhub-sp-hair);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--mhub-sp-text);
  text-align: left;
}

/* The one variant with a heading and a countdown in it: Jitsi with the sidebar hidden. */
.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-not-started:has(.meetinghub_start_time) {
  display: block;
  padding: 20px;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-not-started h1 {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--mhub-sp-ink);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meeting-not-started h4,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub_time_to_start {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mhub-sp-muted);
}

/* A plain disc, so "ended" reads as a state rather than as a warning. */
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-meeting-ended::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mhub-sp-subtle);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webinar-registration-notice {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--mhub-sp-brand-wash);
  box-shadow: none;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webinar-registration-notice p {
  font-size: 14px;
  font-weight: 500;
  color: var(--mhub-sp-brand-active);
}

/* Jitsi's external API sizes its frame in pixels, 1080 by default, which ran off a phone. */
.meetinghub-wrapper.meetinghub-wrapper-flex #meetinghub_meeting {
  max-width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.meetinghub-wrapper.meetinghub-wrapper-flex #meetinghub_meeting iframe {
  display: block;
  max-width: 100%;
}

/* ------------------------------------------------------------- actions -- */

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-zoom-join-links,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-google-meet-join-links,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webex-join-links,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-msteams-join-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
}

/*
 * Every link starts as the quiet one, and only the first in its row is filled.
 *
 * Zoom prints two or three links side by side, and three purple outlines of
 * equal weight asked the visitor to work out which one they wanted. One filled
 * button and its secondaries is the booking page's pattern, and it leaves the
 * obvious path obvious. 44px tall, which is the touch target.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-button,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-google-meet-button,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-webex-button,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-msteams-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  width: auto;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--mhub-sp-hair-strong);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  color: var(--mhub-sp-text);
  cursor: pointer;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-button:hover,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-google-meet-button:hover,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-webex-button:hover,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-msteams-button:hover {
  background: var(--mhub-sp-wash);
  color: var(--mhub-sp-ink);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-button:active,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-google-meet-button:active,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-webex-button:active,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-msteams-button:active {
  background: var(--mhub-sp-wash-strong);
  transform: translateY(1px);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-zoom-join-links > a:first-child,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-google-meet-join-links > a:first-child,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webex-join-links > a:first-child,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-msteams-join-links > a:first-child {
  background: var(--mhub-sp-brand);
  box-shadow: var(--mhub-sp-brand-shadow);
  color: #fff;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-zoom-join-links > a:first-child:hover,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-google-meet-join-links > a:first-child:hover,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webex-join-links > a:first-child:hover,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-msteams-join-links > a:first-child:hover,
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-zoom-join-links > a:first-child:focus,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-google-meet-join-links > a:first-child:focus,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webex-join-links > a:first-child:focus,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-msteams-join-links > a:first-child:focus {
  background: var(--mhub-sp-brand-hover);
  color: #fff;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-zoom-join-links > a:first-child:active,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-google-meet-join-links > a:first-child:active,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webex-join-links > a:first-child:active,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-msteams-join-links > a:first-child:active {
  background: var(--mhub-sp-brand-active);
}

/*
 * One focus ring for every control on the page: `focus-visible`, so a click
 * leaves nothing behind and a keyboard always gets one, offset 2px so it reads
 * as a ring rather than a thicker edge.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex a:focus-visible,
.meetinghub-wrapper.meetinghub-wrapper-flex button:focus-visible {
  outline: 2px solid var(--mhub-sp-brand);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- sidebar -- */

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget {
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--mhub-sp-panel);
  overflow: hidden;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget + .mhub-single-widget {
  margin-top: 0;
}

/*
 * A title, not a bar. The bar was 24px white on #3A3A3A across the full width
 * of every card, which made the card's own name the loudest thing in it.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-widget-title {
  margin: 0 !important;
  padding: 18px 20px 0 !important;
  background: none;
  font-family: inherit;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--mhub-sp-ink) !important;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-widget-inner {
  padding: 12px 20px 20px;
}

/* Cards with no title, such as the host's controls, need their top padding back. */
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget > .mhub-widget-inner:first-child {
  padding-top: 20px;
}

/* ----------------------------------------------------------- countdown -- */

/*
 * Four tiles, days to seconds, sharing the row equally. countdown.js leaves out
 * the leading tiles once they reach zero, so the grid lays out whatever is
 * left. The minimum height holds the space for the second before the first
 * tick, which otherwise makes the card jump.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub_start_time {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  min-height: 66px;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub_start_time .mhub-countdown-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 4px 10px;
  border-radius: 10px;
  background: var(--mhub-sp-wash);
  box-shadow: var(--mhub-sp-hair);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub_start_time .mhub-countdown-value {
  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--mhub-sp-ink);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub_start_time .mhub-countdown-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mhub-sp-muted);
}

/* A status in words: running, ended, finished by the host, or an API message. */
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-widget-inner > .mhub-countdown-wrapper {
  display: block;
  margin: 0;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-widget-inner > .mhub-countdown-wrapper .mhub-countdown-value {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--mhub-sp-ink);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-widget-inner > .mhub-countdown-wrapper .mhub-countdown-label {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--mhub-sp-muted);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-state-running .mhub-countdown-value::before,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-state-ended .mhub-countdown-value::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mhub-sp-subtle);
}

/* Green-700, 5.0:1 on white, so the dot clears the 3:1 a graphic needs. */
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-state-running .mhub-countdown-value::before {
  background: var(--mhub-sp-good);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);
}

/* -------------------------------------------------------------- details -- */

/*
 * Label and value on one row, both left aligned, with a hairline between rows.
 *
 * The labels used to sit centred above their values at 18px bold, so the card
 * read as a column of headings with the facts as footnotes. A two-column grid
 * puts the eye on the values and keeps every label in one place to scan.
 *
 * The recurring rows print two `dd`s under one `dt` (From, To). Pinning dt to
 * the first column and dd to the second lets the second `dd` drop onto its own
 * row under the first, and `dd + dd` keeps the pair together without a rule.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail .mhub-widget-inner {
  padding: 6px 20px 10px;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dl {
  display: grid;
  grid-template-columns: minmax(96px, 124px) minmax(0, 1fr);
  column-gap: 0;
  margin: 0;
  padding: 0;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dt,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dd {
  margin: 0 !important;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  line-height: 1.45;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dt {
  grid-column: 1;
  padding-right: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mhub-sp-subtle);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dd {
  grid-column: 2;
  font-size: 14px;
  font-weight: 500;
  color: var(--mhub-sp-ink);
  overflow-wrap: anywhere;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dd + dd {
  padding-top: 0;
  border-top: 0;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dt:first-child,
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-detail dt:first-child + dd {
  border-top: 0;
}

/* ---------------------------------------------------------- host tools -- */

.meetinghub-wrapper.meetinghub-wrapper-flex button.mhub-meeting-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--mhub-sp-hair-strong);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--mhub-sp-text);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.meetinghub-wrapper.meetinghub-wrapper-flex button.mhub-meeting-status:hover {
  background: var(--mhub-sp-wash);
  color: var(--mhub-sp-ink);
}

/*
 * Ending a meeting is the one destructive control here, so it reads in red, but
 * quietly: red text on white, 6.0:1, and a red wash on hover.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex button.mhub-meeting-status[data-meeting-status="end"] {
  color: var(--mhub-sp-danger);
}

.meetinghub-wrapper.meetinghub-wrapper-flex button.mhub-meeting-status[data-meeting-status="end"]:hover {
  background: var(--mhub-sp-danger-wash);
  color: var(--mhub-sp-danger);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-single-widget-host-actions p {
  margin: 10px 0 0 !important;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mhub-sp-muted);
}

/* Pro's "Add to Google Calendar" card and the WooCommerce buy link. */

/*
 * Pro prints its calendar card inside its own `.mhub-col-12` with an inline 40px
 * top margin and the column rule's 16px side padding, which pushed the card in
 * from the cards above it and opened a gap the sidebar's own spacing already
 * covers. The `!important` is for the inline style. With no card inside (the
 * meeting is not upcoming) the wrapper is hidden so it adds no gap either.
 */
.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-sidebar > .mhub-col-12 {
  width: 100%;
  margin: 0 !important;
  padding: 0;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-sidebar > .mhub-col-12:not(:has(.mhub-single-widget)) {
  display: none;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-sidebar > .mhub-col-12 > .mhub-sidebar {
  display: block;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .calander-btn-wrapper {
  padding: 12px 20px 20px;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-add-to-calendar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--mhub-sp-hair-strong);
  color: var(--mhub-sp-text);
  text-decoration: none;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-add-to-calendar-btn:hover {
  background: var(--mhub-sp-wash);
}

.meetinghub-wrapper.meetinghub-wrapper-flex .mhub-add-to-calendar-btn svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.meetinghub-wrapper.meetinghub-wrapper-flex .calendar-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.meetinghub-wrapper.meetinghub-wrapper-flex a.mhub-buy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--mhub-sp-brand);
  box-shadow: var(--mhub-sp-brand-shadow);
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}

.meetinghub-wrapper.meetinghub-wrapper-flex a.mhub-buy-button:hover {
  background: var(--mhub-sp-brand-hover);
}

/* ------------------------------------------------------------- narrow -- */

@media (max-width: 900px) {
  .meetinghub-wrapper.meetinghub-wrapper-flex {
    display: flex;
    padding: 24px 16px 40px;
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-meeting-col,
  .meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-col-12,
  .meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-sidebar-col {
    flex-basis: 100%;
    width: 100%;
    max-width: none;
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex .mhub-sidebar {
    margin-bottom: 0;
  }
}

/*
 * A phone. The card gives back 8px a side, the title drops five points, and
 * the join buttons go full width so each one is a thumb's width wide rather
 * than two cramped halves of a row.
 */
@media (max-width: 480px) {
  .meetinghub-wrapper.meetinghub-wrapper-flex {
    gap: 16px;
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-meeting-col,
  .meetinghub-wrapper.meetinghub-wrapper-flex > .mhub-col-12 {
    padding: 20px;
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex .mhub-meeting-title {
    font-size: 23px;
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex .meetinghub-zoom-join-links > a,
  .meetinghub-wrapper.meetinghub-wrapper-flex .mhub-google-meet-join-links > a,
  .meetinghub-wrapper.meetinghub-wrapper-flex .mhub-webex-join-links > a,
  .meetinghub-wrapper.meetinghub-wrapper-flex .mhub-msteams-join-links > a {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* No movement for anybody who asked for none: no transitions, no pressed nudge. */
@media (prefers-reduced-motion: reduce) {
  .meetinghub-wrapper.meetinghub-wrapper-flex *,
  .meetinghub-wrapper.meetinghub-wrapper-flex *::before,
  .meetinghub-wrapper.meetinghub-wrapper-flex *::after {
    transition: none !important;
    animation: none !important;
  }

  .meetinghub-wrapper.meetinghub-wrapper-flex a:active,
  .meetinghub-wrapper.meetinghub-wrapper-flex button:active {
    transform: none !important;
  }
}