/* CSS Document */


.hidden {
    display: none;
}


/* "How MEUC CPD works" link on the personal CPD page — routes logged-in
   members back to the general explanation page (/meuc-cpd/). */
.meuc-cpd-info-link {
    margin: 4px 0 24px;
}

.meuc-cpd-info-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-decoration: none;
    color: #009EA0;
}

.meuc-cpd-info-link a:hover,
.meuc-cpd-info-link a:focus {
    text-decoration: underline;
}


.cover-element {
	pointer-events: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Adjust the height as needed */
    background-color: transparent; /* White with 50% transparency */
    pointer-events: none; /* This should block all mouse events */
    z-index: 100; /* Ensure it's above the iframe content */
}


#play-pause-btn.play-btn {
    background-image: url('play-btn2.png');
}

#play-pause-btn.pause-btn {
    background-image: url('pause-btn2.png');
}

#fullscreen-btn.fullscreen-btn {
    background-image: url('fullscreen.png');
}

#fullscreen-btn.exitfullscreen-btn {
    background-image: url('exitfullscreen.png');
}

.play-btn, .pause-btn, .fullscreen-btn, .exitfullscreen-btn {
    width: 40px!important;
	min-width: 0px!important;
    height: 40px!important;
    cursor: pointer!important;
    position: absolute!important;
	background-size: cover!important;
    bottom: 5px!important;
	left: 5px!important;
    z-index: 105!important; /* Ensure it appears above other elements */
    background-color: transparent!important; /* Optional: make the button background transparent */
    border: none!important; /* Remove border */
}

.play-btn, .pause-btn {
	left: 55px!important;
}

/* Add this rule to your existing CSS */
.jetpack-video-wrapper.fullscreen iframe {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important; /* Cover the entire viewport */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.custom-video-controls {
    margin-top: 15px;
}


/* Flexbox layout for label */
.rh-switch-label {
  display: flex;
  align-items: center;
  padding:10px;
padding-left:5px;
	border:thin solid #04205e;
	margin-bottom:20px;
	background: #04205e;
	border-radius: 30px;          /* Rounded corners */
}

/* The switch - the box around the slider */
.rh-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 10px; /* Adjust as needed */
}

/* Style for the label text */
.rh-switch-text {
  flex-grow: 1; /* Allows the text to take up available space */
 color:#f2f2f2;
	margin-left:20px;
}


/* Hide the default checkbox */
.rh-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.rh-video-duration {
    float: right; /* Positioning to the right, can be removed from JS if specified here */
    color: #fff; /* White text color */
    padding: 5px 10px; /* Some padding */
    border-radius: 5px; /* Rounded corners */
}

#end-of-video-overlay button {
    padding: 12px 24px; /* Provides ample space inside the button */
    background-color: #3ab2e6; /* A solid, vibrant color; adjust as needed */
    color: #ffffff; /* White text color for contrast */
    font-size: 16px; /* Readable text size */
    border: none; /* No border for a modern look */
    border-radius: 28px; /* Rounded corners */
    cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
    text-decoration: none; /* Removes underline from links if your button is an <a> tag */
    display: inline-block; /* Allows setting dimensions and aligns better with text */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

#end-of-video-overlay button:hover {
    background-color: #2980b9; /* Darker shade on hover for interactivity */
}


/* The slider */
.rh-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.rh-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: #04205e;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .rh-slider {
  background-color: #3ab2e6;
}

input:focus + .rh-slider {
  box-shadow: 0 0 1px #3ab2e6;
}

input:checked + .rh-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.rh-slider.round {
  border-radius: 34px;
}

.rh-slider.round:before {
  border-radius: 50%;
}

.rh-cpd-text {
  font-size:14px;
	padding-left:30px;
	padding-right:30px;
}

/* Add other styling as needed */

/* -------------------------------------------------- */
/* CPD Application Page — header & certificate list   */
/* -------------------------------------------------- */

/* Intro text + CPD logo side by side below the page header */
.meuc-cpd-intro-wrap {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 32px;
}

.meuc-cpd-intro-text {
    flex: 1;
}

.meuc-cpd-intro-logo {
    flex-shrink: 0;
}

.meuc-cpd-intro-logo img {
    display: block;
    width: 140px;
    height: auto;
}

/* Certificate list header row */
.meuc-cpd-list-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.meuc-cpd-list-header h3 {
    margin: 0;
}

.meuc-cpd-total {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--meuc-text-sec, #5B6575);
}

/* Certificate cards — vertical stack with gap */
.cpd-certificates-list .meuc-ev-card {
    margin-bottom: 12px;
}

/* Responsive: stack intro logo below text on narrow screens */
@media (max-width: 600px) {
    .meuc-cpd-intro-wrap {
        flex-direction: column;
    }
    .meuc-cpd-intro-logo img {
        width: 100px;
    }
}