.cmodal img{
   width: 100%;
   max-height: 50vw;
   object-fit:cover; 
}


.cmodal hgroup,.cmodal main {
   padding-left: clamp(1rem, 3vw, 1.5rem);
   padding-right: clamp(1rem, 3vw, 1.5rem);
}

.cmodal hgroup {
   position: sticky;
   top: 0;
   background: #fff;
   z-index: 20;
   padding-right: 5rem; /*for close-button*/
   padding-top: clamp(1rem, 3vw, 1.5rem);
   padding-bottom: clamp(1rem, 3vw, 1.5rem);
   border-radius: var(--border-radius-lg);
}

.cmodal footer {
   position: sticky;
   bottom: 0;
   background: #fff;
   z-index: 20;
   padding-top: clamp(1rem, 3vw, 1.5rem);
   padding-bottom: clamp(1rem, 3vw, 1.5rem);
   border-bottom-left-radius: var(--border-radius-lg);
   border-bottom-right-radius: var(--border-radius-lg);   
   border-top: 1px solid #CCC;
}




.cmodal * {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}





.cmodal {
   width: 100%;
   height: 100%;
   background: none;
   padding: 0;
   margin: 0;
   border: 0;
   overflow-y: auto;
   max-height: unset;
   max-width: unset;
   top: 0;
   left: 0;      
}


.cmodal .modal-container {
   border-radius: var(--border-radius-lg);
   padding: 0;
   border: none;
   width: 96%;
   max-width: 800px;
   background: white;
   position: absolute;
   left: 50%; /* Moves it to the middle horizontally */
   transform: translateX(-50%); /* Centers it horizontally */
   display: flex;
   flex-direction: column;
   top: 10%;
}


.cmodal .modal-container.is-centered-vertically {
   top: 50%;
   transform: translate(-50%, -50%); /* Center both horizontally and vertically */
}

.cmodal .modal-container.is-large {
   top: 4%; /* Stick to top 10% */
}

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

.cmodal-content {
   position: relative;
   flex-grow: 1;
   overflow-y: auto; /* Enable vertical scrolling */
}






.cmodal-body {
   margin-top: 10px;
   overflow-y: auto;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.cmodal-content::-webkit-scrollbar {
   display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.cmodal-content {
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
}

/* Custom scrollbar styles */
.cmodal-content {
   scrollbar-width: thin;
   scrollbar-color: #888 #f1f1f1;
}

.cmodal-content::-webkit-scrollbar {
   width: 8px;
}

.cmodal-content::-webkit-scrollbar-track {
   background: #f1f1f1;
}

.cmodal-content::-webkit-scrollbar-thumb {
   background-color: #888;
   border-radius: 4px;
}
.cmodal button.is-close {
   border-radius: var(--border-radius);
   top: 1rem;
   right: 1rem;
   position: absolute;
   transition: background-color 0.3s, transform 0.3s;
}

.cmodal button.is-close:hover {
  background-color: #f0f0f0;
  transform: scale(1.1);
}

.cmodal button.is-close:hover:after{
   color: #666;
}




.cmodal button.is-close:after {
   content: "\2715";
   font-size: 18px;
   color: #999;
}


.cmodal[data-theme="default"] .is-header{
    font-weight: 500;
}



.cmodal[data-theme='default'] .is-hero img{
      width: 100%;
    height: 30vw;
    aspect-ratio: 13 / 7;
    object-fit: cover;
    border-radius: 8px;
    min-height: 96px;
    max-height: 288px;   
}



/* The is-header in the hgroup, styled like an h1 */
.cmodal[data-theme="default"] hgroup .is-header {
   font-size: clamp(1.75rem, 3.5vw, 2.1rem);
    margin: 0;
}

/* Main section inside the modal */
.cmodal[data-theme="default"] main {

}

/* Top-level section header, styled like an h2 */
.cmodal[data-theme="default"] main section .is-header {
   font-size: clamp(1rem, 0.7857rem + 1.1429vw, 1.5rem);
   font-weight: 500;
   margin-bottom: clamp(12px, 2.3vw, 18px);
}

/* Paragraph and unordered list styling xlarge (1.5) */
.cmodal[data-theme="default"] main p.fsize-xlarge, .cmodal[data-theme="default"] main p .fsize-xlarge,
.cmodal[data-theme="default"] main ul.fsize-xlarge, .cmodal[data-theme="default"] main ul fsize-xlarge {
   font-size: clamp(1.21875rem, 1.0581rem + 0.8571vw, 1.59375rem);
}


/* Nested section header, styled like an h3 */
.cmodal[data-theme="default"] main section section .is-header {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: bold;
    margin-bottom: 1vw;
}


/* Adjust the close button style if needed */
.cmodal[data-theme="default"] button.close {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

.cmodal .modal-container.is-loading {
   position: relative;
}

.cmodal .modal-container.is-loading::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.8); /* Semi-transparent white overlay */
   z-index: 500; /* Ensure it overlays modal content */
}

.cmodal .modal-container.is-loading::after {
   content: "";
   position: absolute;
   width: 30px;
   height: 30px;
   border: 4px solid #ccc; /* Outer circle color */
   border-top: 4px solid #0067ce; /* Spinner color */
   border-radius: 50%;
   animation: spin 1s linear infinite;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 501; /* Ensure it's above the overlay */
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}