.modal-con2{position: relative;}
.closebutton, .close{
  position: absolute;
  color: grey;
  top: 0px;
  right: 0px;
  border:0px;
  border-radius: 50%;
  margin:5px 10px;
  background-color: #e5e5e5;
  padding:2px 10px;
  z-index: 1001;
}

.information{padding:40px;}
.column15,.column25,.column50,.column75,.column85 {
  float: left;
}
.column15{width:15%;}
.column25{width:25%;}
.column50{width:50%;}
.column75{width:75%;}
.column85{width:85%;}

.columnrow:after {
  content: "";
  display: table;
  clear: both;
}

img{
  max-width: 100%;
  max-height: 100%;
}

.btn{padding:12px 100px!important}

.field-wrapper {
  display: block;
  margin: 5px 5px;
  position: relative;
  outline: none;
  width: 48%;
  float:Left;
}

.field-wrapper.focused label {
  transition: all .2s linear;
  top: -25px;
}
h2{margin-left:10px}
.field-wrapper label {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    font-size: 80%;
    position: absolute;
    top: 0px;
    display: inline-block;
    background: #FFF;
    margin: 20px 5px;
    line-height: 1.4em;
    padding: 5px 10px;
    transition: all .2s linear;
    text-transform: capitalize;
    width:90%;
}


input[type="text"],
input[type="email"],
input[type="select"],
textarea{
  padding: 10px;
  width: 100%;
  background: #FFF;
}

select,textarea{
  font-size: 1em;
  background: #FFF;
  color:#000;
}
h4{margin-top:0px;margin-bottom:0px;}

.checkbox{
  padding: 10px;
  border:1px solid #ccc;
}

textarea{height:90px;}

input[type="submit"] {
  padding: 10px;
  border: 1px solid #b5b5b5;
}

.container25 {
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  opacity: 0.85;
  overflow: auto;
  width: 100%;
  height:0;
  transition: .5s ease;
  color:#fff!important;
  z-index:10000;
}
.container25:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 70%;
  position: absolute;
  top: 2%;
  left: 10%;
  width:80%;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  padding:10px;
}

#navbar a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.content {
  padding: 16px;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #f8f072;
  font-size: 120%;
  padding:3px;
  z-index: 1000;
}

.sticky1 {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky1 + .content {
  padding-top: 60px;
}
.checkboxspan{width:100%;background:#f1f1f1;margin:5px;padding:10px;border-radius:10px;box-sizing: border-box !important;}
.displaybox{min-height:350px;max-height:350px;}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 860px) {
  .float50{float:none;width:100%;}
  #maintrainingimage{border:3px solid yellow;display:none;}
  .btn{margin:2px!important;width:auto!important;padding:8px!important;}
  .column {
    float: none;
    width: 100%;
  }
  .displaybox{min-height:auto;max-height:auto;}
  .information{padding:5px;}
  .column15,.column25,.column50,.column75,.column85 {
    width: 100%;
    padding:5px;
    position: relative;
  }
  .field-wrapper {
    width: 97%;
    margin:0px;
  }
  .field-wrapper label {
      width:60%;
  }

}
@media screen and (max-width: 1200px) {
  h1{font-size:130%}

}


/* =========================================================
   GROUPED BOOKING FILTER MODAL
   ========================================================= */
#modal-createarea .browse-filter-columns{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:20px !important;
}

#modal-createarea .browse-filter-panel{
    padding:18px !important;
    border:1px solid #e2e8f0 !important;
    border-radius:12px !important;
    background:#fff !important;
}

#modal-createarea .browse-filter-panel h3{
    margin:0 0 14px !important;
    padding:0 0 10px !important;
    border-bottom:1px solid #eef2f7 !important;
}

#modal-createarea #aud_main,
#modal-createarea #area_main{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
}

#modal-createarea .grouped-filter-option,
#modal-createarea #aud_main > .grouped-filter-option,
#modal-createarea #area_main > .grouped-filter-option{
    position:static !important;
    float:none !important;
    clear:both !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
    width:100% !important;
    min-height:34px !important;
    height:auto !important;
    margin:0 0 4px !important;
    padding:6px 8px !important;
    border:0 !important;
    border-radius:7px !important;
    background:transparent !important;
    box-sizing:border-box !important;
    line-height:1.2 !important;
}

#modal-createarea .grouped-filter-option:hover{
    background:#f8fafc !important;
}

#modal-createarea .grouped-filter-option label{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    white-space:normal !important;
    background:transparent !important;
    color:#475569 !important;
    font-size:13px !important;
    line-height:1.2 !important;
    text-transform:none !important;
}

#modal-createarea .grouped-filter-option input[type="checkbox"]{
    position:static !important;
    float:none !important;
    flex:0 0 16px !important;
    width:16px !important;
    height:16px !important;
    margin:0 !important;
    padding:0 !important;
}

#modal-createarea .grouped-filter-option span{
    position:static !important;
    display:inline !important;
    width:auto !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
    white-space:normal !important;
    color:#475569 !important;
}

#modal-createarea #showmoreaudiences,
#modal-createarea #showmorearea{
    position:static !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:auto !important;
    min-height:36px !important;
    margin:10px 0 0 !important;
    padding:7px 12px !important;
    border:1px solid #cbd5e1 !important;
    border-radius:8px !important;
    background:#f8fafc !important;
    color:#2563eb !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1 !important;
    text-decoration:none !important;
}

#modal-createarea #showmoreaudiences:hover,
#modal-createarea #showmorearea:hover{
    background:#eff6ff !important;
    border-color:#93c5fd !important;
}

@media(max-width:650px){
    #modal-createarea .browse-filter-columns{
        grid-template-columns:1fr !important;
    }
}

/* =========================================================
   MODERN BOOKING PAGE STYLES
   Moved from index.php on 20 Aug 2026.
   Kept in original order to preserve the existing cascade.
   ========================================================= */

:root{
    --event-ink:#172033;
    --event-muted:#667085;
    --event-line:#e4e9ef;
    --event-soft:#f6f8fb;
    --event-blue:#155eef;
    --event-blue-soft:#edf4ff;
    --event-radius:22px;
}

#pagecontainer{
    max-width:1480px;
    margin:0 auto;
    padding:28px;
}

#pagecontainer .event-page{
    width:100%;
}

#pagecontainer .event-primary,
#pagecontainer .event-surface{
    width:100%;
}

#pagecontainer .event-surface{
    background:transparent;
}

/* HERO */
#pagecontainer .event-hero{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(390px,.8fr);
    min-height:520px;
    overflow:hidden;
    border-radius:28px;
    background:#fff;
    box-shadow:0 22px 55px rgba(16,24,40,.10);
}

#pagecontainer .event-hero-media{
    min-width:0;
    background:#dfe6ec;
}

#pagecontainer .event-hero-media img{
    width:100%;
    height:100%;
    min-height:520px;
    object-fit:cover;
    display:block;
}

#pagecontainer .event-hero-panel{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:48px 44px;
    background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);
}

#pagecontainer .event-eyebrow,
#pagecontainer .event-kicker{
    display:block;
    margin-bottom:10px;
    color:var(--event-blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}

#pagecontainer .event-hero-panel h1{
    margin:0 0 16px;
    color:var(--event-ink);
    font-size:clamp(34px,3.5vw,52px);
    line-height:1.04;
    letter-spacing:-.04em;
}

#pagecontainer .event-id{
    display:inline-flex;
    width:max-content;
    margin-bottom:16px;
    padding:7px 10px;
    border-radius:999px;
    background:#eef2f6;
    color:#667085;
    font-size:12px;
    font-weight:800;
}

#pagecontainer .event-contact{
    display:grid;
    grid-template-columns:70px 1fr;
    gap:10px;
    align-items:center;
    margin-bottom:6px;
    font-size:14px;
}

#pagecontainer .event-contact span{
    color:#98a2b3;
    font-weight:700;
}

#pagecontainer .event-contact a{
    color:var(--event-blue);
    font-weight:700;
    text-decoration:none;
}

#pagecontainer #bookingwindow{
    margin-top:26px;
    padding:18px;
    border:1px solid #dfe5ec;
    border-radius:17px;
    background:#fff;
    box-shadow:0 10px 26px rgba(16,24,40,.07);
}

#pagecontainer #bookingwindow p{
    margin:0;
}

#pagecontainer #bookplace,
#pagecontainer #bookingautoopen .btn{
    width:100%;
    min-height:54px;
    border:0;
    border-radius:13px;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}

#pagecontainer #opening{
    padding:14px;
    border-radius:12px;
    background:#f8fafc;
}

#pagecontainer #redaccessbox{
    margin-top:16px!important;
    border-radius:16px!important;
    background:#fffafa;
}

/* BODY */
#pagecontainer .event-content{
    margin-top:30px;
}

#pagecontainer .event-info-grid{
    display:grid;
    grid-template-columns:minmax(0,1.8fr) minmax(300px,.75fr);
    gap:26px;
    align-items:start;
}

#pagecontainer .event-about,
#pagecontainer .event-details,
#pagecontainer .event-sessions{
    box-sizing:border-box;
    border:1px solid var(--event-line);
    border-radius:var(--event-radius);
    background:#fff;
    box-shadow:0 10px 30px rgba(16,24,40,.05);
}

#pagecontainer .event-about{
    padding:36px;
}

#pagecontainer .event-about h2,
#pagecontainer .event-details h2,
#pagecontainer .event-section-heading h2,
#pagecontainer .event-related-heading h2{
    margin:0;
    color:var(--event-ink);
    font-size:28px;
    line-height:1.15;
}

#pagecontainer .event-description{
    margin-top:22px;
    color:#344054;
    font-size:16px;
    line-height:1.8;
}

#pagecontainer .event-details{
    padding:30px;
}

#pagecontainer .event-details h2{
    margin-bottom:20px;
    font-size:23px;
}

#pagecontainer .event-detail-row{
    padding:17px 0;
    border-top:1px solid #eef2f5;
}

#pagecontainer .event-detail-row:first-of-type{
    border-top:0;
    padding-top:0;
}

#pagecontainer .event-detail-row > span{
    display:block;
    margin-bottom:7px;
    color:#98a2b3;
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

#pagecontainer .event-detail-row strong{
    color:#344054;
    font-size:14px;
}

#pagecontainer .event-audience a{
    text-decoration:none;
}

#pagecontainer .event-audience span.round{
    display:inline-block;
    margin:3px 4px 3px 0!important;
    padding:6px 9px!important;
    border-radius:999px;
    font-size:12px;
}

/* SESSIONS */
#pagecontainer .event-sessions{
    margin-top:26px;
    padding:30px;
}

#pagecontainer .event-section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:22px;
    padding-bottom:20px;
    border-bottom:1px solid #edf1f4;
}

#pagecontainer .event-section-heading p{
    max-width:420px;
    margin:0;
    color:var(--event-muted);
    font-size:14px;
    line-height:1.5;
    text-align:right;
}

#pagecontainer .event-session-card{
    display:grid;
    grid-template-columns:240px minmax(0,1fr) 250px;
    gap:0;
    align-items:stretch;
    overflow:hidden;
    margin-bottom:14px;
    border:1px solid #e4e9ef;
    border-radius:16px;
    background:#fff;
}

#pagecontainer .event-session-card:last-of-type{
    margin-bottom:0;
}

#pagecontainer .event-session-date{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px;
    background:#f2f6fb;
    border-right:1px solid #e3e9ef;
}

#pagecontainer .event-session-label{
    margin-bottom:6px;
    color:#98a2b3;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

#pagecontainer .event-session-date strong{
    color:var(--event-ink);
    font-size:15px;
    line-height:1.45;
}

#pagecontainer .event-session-extra{
    margin-top:7px;
    color:#667085;
    font-size:12px;
    line-height:1.4;
}

#pagecontainer .event-session-date .hiddensession{
    display:inline-block;
    width:max-content;
    margin-top:8px;
    color:var(--event-blue);
    font-size:12px;
    font-weight:800;
}

#pagecontainer .event-session-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px 24px;
}

#pagecontainer .event-session-title{
    color:var(--event-ink);
    font-size:18px;
    font-weight:800;
}

#pagecontainer .event-session-title span{
    margin-left:4px;
    color:#98a2b3;
    font-size:11px;
}

#pagecontainer .event-session-location{
    margin-top:8px;
    color:#667085;
    font-size:14px;
}

#pagecontainer .event-session-location .fa{
    margin-right:6px;
}

#pagecontainer .event-session-availability{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:20px;
}

#pagecontainer .event-session-availability br{
    display:none;
}

#pagecontainer .event-session-availability .fontgreen,
#pagecontainer .event-session-availability .fontred,
#pagecontainer .event-session-availability .bgred,
#pagecontainer .event-session-availability .bgorange{
    display:inline-flex!important;
    margin:0!important;
    padding:8px 11px!important;
    border-radius:999px!important;
    font-size:12px!important;
    font-weight:800!important;
}

#pagecontainer .event-session-availability .fontgreen{
    background:#ecfdf3;
    color:#027a48!important;
}

#pagecontainer .event-session-availability .fontred{
    background:#fff1f1;
    color:#b42318!important;
}

/* Smarter session availability statuses */
#pagecontainer .availability-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
}

#pagecontainer .availability-good,
#pagecontainer .availability-available{
    background:#ecfdf3;
    color:#027a48;
}

#pagecontainer .availability-limited{
    background:#fffaeb;
    color:#b54708;
}

#pagecontainer .availability-fast,
#pagecontainer .availability-held{
    background:#fff4e5;
    color:#b54708;
}

#pagecontainer .availability-critical,
#pagecontainer .availability-full{
    background:#fff1f1;
    color:#b42318;
}

/* RELATED */
#pagecontainer .event-related{
    margin-top:42px;
}

#pagecontainer .event-related-heading{
    margin-bottom:20px;
}

#pagecontainer .event-related-heading p{
    margin:8px 0 0;
    color:var(--event-muted);
}

#pagecontainer .event-related-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

#pagecontainer .event-related-card{
    overflow:hidden;
    border:1px solid var(--event-line);
    border-radius:19px;
    background:#fff;
    box-shadow:0 8px 24px rgba(16,24,40,.05);
    transition:transform .18s ease, box-shadow .18s ease;
}

#pagecontainer .event-related-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(16,24,40,.10);
}

#pagecontainer .event-related-card a{
    display:block;
    height:100%;
    color:inherit;
    text-decoration:none;
}

#pagecontainer .event-related-image{
    height:190px;
    overflow:hidden;
    background:#eef2f6;
}

#pagecontainer .event-related-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

#pagecontainer .event-related-body{
    padding:20px;
}

#pagecontainer .event-related-dept{
    display:block;
    margin-bottom:8px;
    color:var(--event-blue);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#pagecontainer .event-related-body h3{
    margin:0 0 10px;
    color:var(--event-ink);
    font-size:18px;
    line-height:1.3;
}

#pagecontainer .event-related-meta{
    min-height:44px;
    color:#667085;
    font-size:13px;
    line-height:1.5;
}

#pagecontainer .event-related-link{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid #edf1f4;
    color:var(--event-blue);
    font-size:13px;
    font-weight:800;
}

#pagecontainer .event-related-link span{
    float:right;
    font-size:18px;
}

#pagecontainer .event-related-all{
    grid-column:1/-1;
    text-align:center;
}

#pagecontainer .event-related-all a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 17px;
    border:1px solid #d9e1e9;
    border-radius:12px;
    background:#fff;
    color:var(--event-blue);
    text-decoration:none;
    font-weight:800;
}

/* MODAL */
#modal-bookcourse{
    position:fixed;
    inset:0;
    z-index:9999;
    padding:4vh 4vw;
    overflow:auto;
    box-sizing:border-box;
    background:rgba(15,23,42,.68);
    backdrop-filter:blur(5px);
}

#modal-bookcourse .event-booking-modal{
    position:relative;
    width:min(1120px,92vw);
    max-height:90vh;
    margin:0 auto;
    overflow:auto;
    border-radius:24px;
    background:#f7f9fc;
    box-shadow:0 32px 90px rgba(0,0,0,.34);
}

#modal-bookcourse .event-modal-header{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 28px 18px;
    border-bottom:1px solid #e9eef3;
    background:#fff;
}

#modal-bookcourse .event-modal-header h2{
    margin:0 0 5px;
    color:var(--event-ink);
    font-size:26px;
}

#modal-bookcourse .event-modal-header p{
    margin:0;
    color:#667085;
    font-size:13px;
}

#modal-bookcourse .event-modal-close{
    position:static!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border:1px solid #d8e0e8!important;
    border-radius:50%!important;
    background:#fff!important;
    font-size:24px!important;
    line-height:1!important;
}

#modal-bookcourse .event-modal-progress{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:16px 28px;
    background:#fff;
    border-bottom:1px solid #e9eef3;
}

#modal-bookcourse .event-modal-progress span{
    padding:10px 12px;
    border-radius:10px;
    background:#f3f5f8;
    color:#98a2b3;
    font-size:12px;
    font-weight:800;
}

#modal-bookcourse .event-modal-progress span.active{
    background:#edf4ff;
    color:#155eef;
}

#modal-bookcourse .event-modal-progress b{
    margin-left:6px;
}

#modal-bookcourse #courseinfoall{
    padding:28px;
}

#modal-bookcourse #bookinginfodetails:not(:empty),
#modal-bookcourse #waitinglistdetails:not(:empty),
#modal-bookcourse #replyfields:not(:empty){
    max-width:900px;
    margin:0 auto 18px;
    padding:24px;
    border:1px solid #e4e9ef;
    border-radius:17px;
    background:#fff;
    box-shadow:0 8px 22px rgba(16,24,40,.04);
}

#modal-bookcourse #clockdiv{
    position:sticky;
    top:142px;
    z-index:15;
    max-width:900px;
    margin:0 auto 18px;
    padding:12px 16px;
    border:1px solid #cfe0ff;
    border-radius:12px;
    background:#edf4ff;
    color:#1d4ed8;
    text-align:center;
    font-weight:800;
}

#modal-bookcourse #replyfields label{
    display:block;
    margin:0 0 7px;
    color:#344054;
    font-size:13px;
    font-weight:800;
}

#modal-bookcourse #replyfields input[type="text"],
#modal-bookcourse #replyfields input[type="email"],
#modal-bookcourse #replyfields input[type="tel"],
#modal-bookcourse #replyfields input[type="number"],
#modal-bookcourse #replyfields select,
#modal-bookcourse #replyfields textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    min-height:48px;
    margin-bottom:16px;
    padding:12px 14px;
    border:1px solid #cfd8e3;
    border-radius:11px;
    background:#fff;
    font-size:15px;
}

#modal-bookcourse #replyfields input:focus,
#modal-bookcourse #replyfields select:focus,
#modal-bookcourse #replyfields textarea:focus{
    outline:0;
    border-color:#84adff;
    box-shadow:0 0 0 4px rgba(21,94,239,.10);
}

#modal-bookcourse #replyfields button,
#modal-bookcourse #replyfields .btn,
#modal-bookcourse #replyfields input[type="submit"]{
    min-height:48px;
    padding:12px 20px;
    border-radius:11px;
    font-weight:800;
}

#modal-bookcourse #timesup{
    max-width:900px;
    margin:0 auto;
    padding:24px;
    border:1px solid #fecaca;
    border-radius:16px;
    background:#fff7f7;
}

/* RESPONSIVE */
@media(max-width:1050px){
    #pagecontainer .event-hero{
        grid-template-columns:1fr;
    }
    #pagecontainer .event-hero-media img{
        min-height:340px;
        max-height:440px;
    }
    #pagecontainer .event-info-grid{
        grid-template-columns:1fr;
    }
    #pagecontainer .event-related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:780px){
    #pagecontainer{
        padding:12px;
    }
    #pagecontainer .event-hero{
        border-radius:18px;
    }
    #pagecontainer .event-hero-panel{
        padding:30px 22px;
    }
    #pagecontainer .event-session-card{
        grid-template-columns:1fr;
    }
    #pagecontainer .event-session-date{
        border-right:0;
        border-bottom:1px solid #e3e9ef;
    }
    #pagecontainer .event-session-availability{
        justify-content:flex-start;
        padding-top:0;
    }
    #pagecontainer .event-section-heading{
        display:block;
    }
    #pagecontainer .event-section-heading p{
        margin-top:8px;
        text-align:left;
    }
    #pagecontainer .event-related-grid{
        grid-template-columns:1fr;
    }
    #modal-bookcourse{
        padding:0;
    }
    #modal-bookcourse .event-booking-modal{
        width:100%;
        min-height:100vh;
        max-height:100vh;
        border-radius:0;
    }
    #modal-bookcourse .event-modal-progress{
        padding:12px 16px;
    }
    #modal-bookcourse .event-modal-progress b{
        display:none;
    }
    #modal-bookcourse #courseinfoall{
        padding:16px;
    }
}

/* =========================================================
   V13 - BOOKING DRAWER
   Keep existing modal/AJAX IDs, present it as a side panel.
   ========================================================= */

#modal-bookcourse{
    padding:0 !important;
    background:rgba(15,23,42,.48) !important;
    backdrop-filter:blur(3px);
}

#modal-bookcourse .event-booking-drawer{
    width:min(680px,55vw) !important;
    max-width:680px !important;
    height:100vh !important;
    max-height:100vh !important;
    min-height:100vh;
    margin:0 0 0 auto !important;
    border-radius:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:#f7f9fc !important;
    box-shadow:-24px 0 70px rgba(15,23,42,.24) !important;
}

#modal-bookcourse .event-modal-header{
    position:sticky !important;
    top:0;
    z-index:30;
    padding:24px 28px 20px !important;
    background:#fff !important;
    border-bottom:1px solid #e8edf2 !important;
}

#modal-bookcourse .event-modal-header h2{
    font-size:25px !important;
}

#modal-bookcourse .event-modal-header p{
    max-width:500px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#modal-bookcourse .event-modal-close{
    flex:0 0 42px;
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    font-size:25px !important;
    color:#475467 !important;
    transition:background .15s ease,border-color .15s ease;
}

#modal-bookcourse .event-modal-close:hover{
    background:#f3f5f7 !important;
    border-color:#cbd5df !important;
}

#modal-bookcourse #courseinfoall{
    padding:24px 28px 110px !important;
}

#modal-bookcourse #bookinginfodetails:not(:empty),
#modal-bookcourse #waitinglistdetails:not(:empty),
#modal-bookcourse #replyfields:not(:empty){
    width:100%;
    max-width:none !important;
    box-sizing:border-box;
    margin:0 0 18px !important;
    padding:22px !important;
    border-radius:16px !important;
    background:#fff !important;
    border:1px solid #e3e9ef !important;
    box-shadow:0 5px 18px rgba(16,24,40,.04) !important;
}

#modal-bookcourse #bookinginfodetails:not(:empty):before{
    content:"Booking details";
    display:block;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid #eef2f5;
    color:#172033;
    font-size:17px;
    font-weight:800;
}

#modal-bookcourse #waitinglistdetails:not(:empty):before{
    content:"Waiting list";
    display:block;
    margin-bottom:14px;
    padding-bottom:12px;
    border-bottom:1px solid #eef2f5;
    color:#172033;
    font-size:17px;
    font-weight:800;
}

#modal-bookcourse #replyfields:not(:empty):before{
    content:"Your details";
    display:block;
    margin-bottom:18px;
    padding-bottom:12px;
    border-bottom:1px solid #eef2f5;
    color:#172033;
    font-size:19px;
    font-weight:800;
}

#modal-bookcourse #replyfields form{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

#modal-bookcourse #replyfields label{
    margin-bottom:7px !important;
    color:#344054 !important;
    font-size:13px !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields input[type="text"],
#modal-bookcourse #replyfields input[type="email"],
#modal-bookcourse #replyfields input[type="tel"],
#modal-bookcourse #replyfields input[type="number"],
#modal-bookcourse #replyfields input[type="date"],
#modal-bookcourse #replyfields select,
#modal-bookcourse #replyfields textarea{
    min-height:48px !important;
    margin-bottom:17px !important;
    padding:12px 14px !important;
    border:1px solid #cfd8e3 !important;
    border-radius:11px !important;
    background:#fff !important;
}

#modal-bookcourse #replyfields textarea{
    min-height:110px !important;
}

#modal-bookcourse #replyfields input:focus,
#modal-bookcourse #replyfields select:focus,
#modal-bookcourse #replyfields textarea:focus{
    border-color:#84adff !important;
    box-shadow:0 0 0 4px rgba(21,94,239,.10) !important;
}

#modal-bookcourse #clockdiv{
    position:fixed !important;
    z-index:40 !important;
    right:0;
    bottom:0;
    top:auto !important;
    width:min(680px,55vw);
    max-width:680px !important;
    box-sizing:border-box;
    margin:0 !important;
    padding:14px 28px !important;
    border:0 !important;
    border-top:1px solid #d9e4f0 !important;
    border-radius:0 !important;
    background:#edf4ff !important;
    box-shadow:0 -8px 24px rgba(16,24,40,.07);
    color:#1d4ed8 !important;
    text-align:left !important;
}

#modal-bookcourse #clockdiv p{
    margin:0 !important;
    font-size:13px;
    font-weight:800;
}

#modal-bookcourse #timesup{
    max-width:none !important;
    margin:0 !important;
    padding:22px !important;
    border-radius:16px !important;
}

#modal-bookcourse #replyfields input[type="submit"],
#modal-bookcourse #replyfields button[type="submit"],
#modal-bookcourse #replyfields .btn{
    min-height:48px !important;
    padding:12px 18px !important;
    border-radius:11px !important;
    font-weight:800 !important;
}

@media(max-width:1050px){
    #modal-bookcourse .event-booking-drawer{
        width:min(760px,72vw) !important;
        max-width:760px !important;
    }

    #modal-bookcourse #clockdiv{
        width:min(760px,72vw);
        max-width:760px !important;
    }
}

@media(max-width:720px){
    #modal-bookcourse .event-booking-drawer{
        width:100% !important;
        max-width:none !important;
    }

    #modal-bookcourse .event-modal-header{
        padding:20px 18px 16px !important;
    }

    #modal-bookcourse #courseinfoall{
        padding:18px 16px 100px !important;
    }

    #modal-bookcourse #clockdiv{
        left:0;
        right:0;
        width:100% !important;
        max-width:none !important;
        padding:13px 18px !important;
    }

    #modal-bookcourse #bookinginfodetails:not(:empty),
    #modal-bookcourse #waitinglistdetails:not(:empty),
    #modal-bookcourse #replyfields:not(:empty){
        padding:18px !important;
        border-radius:14px !important;
    }
}




/* =========================================================
   V15 - AIRLINE-STYLE SLIDE-OUT BOOKING DRAWER
   Behaviour inspired by modern travel booking panels.
   ========================================================= */

@keyframes eventDrawerOverlayIn{
    from{background:rgba(15,23,42,0);}
    to{background:rgba(15,23,42,.58);}
}

@keyframes eventDrawerSlideIn{
    from{transform:translateX(100%);}
    to{transform:translateX(0);}
}

@keyframes eventDrawerSlideOut{
    from{transform:translateX(0);}
    to{transform:translateX(100%);}
}

#modal-bookcourse{
    padding:0 !important;
    overflow:hidden !important;
    background:rgba(15,23,42,.58) !important;
    backdrop-filter:blur(2px);
    animation:eventDrawerOverlayIn .22s ease-out;
}

#modal-bookcourse .event-booking-drawer{
    width:min(720px,56vw) !important;
    max-width:720px !important;
    height:100vh !important;
    min-height:100vh !important;
    max-height:100vh !important;
    margin:0 0 0 auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border-radius:0 !important;
    background:#f4f6f8 !important;
    box-shadow:-22px 0 55px rgba(15,23,42,.28) !important;
    animation:eventDrawerSlideIn .34s cubic-bezier(.22,.8,.32,1);
    transform-origin:right center;
}

#modal-bookcourse.event-drawer-closing .event-booking-drawer{
    animation:eventDrawerSlideOut .25s ease-in forwards !important;
}

/* Header */
#modal-bookcourse .event-modal-header{
    position:sticky !important;
    top:0;
    z-index:50;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:18px !important;
    padding:25px 30px 22px !important;
    border:0 !important;
    background:#ffffff !important;
    box-shadow:0 1px 0 #e4e9ef !important;
}

#modal-bookcourse .event-modal-heading{
    min-width:0;
}

#modal-bookcourse .event-modal-header .event-kicker{
    margin-bottom:7px !important;
    color:#667085 !important;
    font-size:10px !important;
    letter-spacing:.12em !important;
}

#modal-bookcourse .event-modal-header h2{
    margin:0 0 6px !important;
    color:#172033 !important;
    font-size:28px !important;
    line-height:1.1 !important;
    letter-spacing:-.02em;
}

#modal-bookcourse .event-modal-header p{
    max-width:540px !important;
    margin:0 !important;
    overflow:hidden;
    color:#667085 !important;
    font-size:13px !important;
    line-height:1.4;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#modal-bookcourse .event-modal-close{
    position:static !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #d6dde5 !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#344054 !important;
    box-shadow:none !important;
    font-size:27px !important;
    line-height:1 !important;
}

#modal-bookcourse .event-modal-close:hover{
    background:#f2f4f7 !important;
}

/* Summary strip */
#modal-bookcourse .event-drawer-summary{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:14px;
    align-items:center;
    margin:22px 30px 0;
    padding:17px 18px;
    border:1px solid #dbe4ec;
    border-radius:15px;
    background:#fff;
    box-shadow:0 4px 12px rgba(16,24,40,.04);
}

#modal-bookcourse .event-drawer-summary-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#edf4ff;
    color:#155eef;
    font-size:20px;
}

#modal-bookcourse .event-drawer-summary span,
#modal-bookcourse .event-drawer-summary small{
    display:block;
    color:#98a2b3;
    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

#modal-bookcourse .event-drawer-summary strong{
    display:block;
    margin:4px 0 5px;
    overflow:hidden;
    color:#172033;
    font-size:15px;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Main drawer content */
#modal-bookcourse #courseinfoall{
    padding:22px 30px 105px !important;
}

/* AJAX-loaded booking information */
#modal-bookcourse #bookinginfodetails:not(:empty){
    position:relative;
    width:100%;
    box-sizing:border-box;
    margin:0 0 16px !important;
    padding:20px !important;
    border:1px solid #cfe0ff !important;
    border-radius:15px !important;
    background:#f2f7ff !important;
    box-shadow:none !important;
}

#modal-bookcourse #bookinginfodetails:not(:empty):before{
    content:"Your selected session" !important;
    display:block;
    margin:0 0 14px !important;
    padding:0 0 11px !important;
    border-bottom:1px solid #dbe8fb !important;
    color:#174ea6 !important;
    font-size:14px !important;
    font-weight:800 !important;
}

/* Waiting list gets its own warm treatment */
#modal-bookcourse #waitinglistdetails:not(:empty){
    width:100%;
    box-sizing:border-box;
    margin:0 0 16px !important;
    padding:20px !important;
    border:1px solid #fedf89 !important;
    border-radius:15px !important;
    background:#fffaeb !important;
    box-shadow:none !important;
}

#modal-bookcourse #waitinglistdetails:not(:empty):before{
    content:"Waiting list" !important;
    display:block;
    margin-bottom:12px !important;
    padding-bottom:10px !important;
    border-bottom:1px solid #fde7a8 !important;
    color:#93370d !important;
    font-size:14px !important;
    font-weight:800 !important;
}

/* Form card */
#modal-bookcourse #replyfields:not(:empty){
    width:100%;
    box-sizing:border-box;
    margin:0 !important;
    padding:24px !important;
    border:1px solid #e1e7ed !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 6px 18px rgba(16,24,40,.05) !important;
}

#modal-bookcourse #replyfields:not(:empty):before{
    content:"Your details" !important;
    display:block;
    margin:0 0 20px !important;
    padding:0 0 13px !important;
    border-bottom:1px solid #edf1f4 !important;
    color:#172033 !important;
    font-size:20px !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields form{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

#modal-bookcourse #replyfields label{
    display:block !important;
    margin:0 0 7px !important;
    color:#344054 !important;
    font-size:13px !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields input[type="text"],
#modal-bookcourse #replyfields input[type="email"],
#modal-bookcourse #replyfields input[type="tel"],
#modal-bookcourse #replyfields input[type="number"],
#modal-bookcourse #replyfields input[type="date"],
#modal-bookcourse #replyfields select,
#modal-bookcourse #replyfields textarea{
    width:100% !important;
    max-width:100% !important;
    min-height:50px !important;
    box-sizing:border-box !important;
    margin:0 0 17px !important;
    padding:12px 14px !important;
    border:1px solid #cbd5df !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#172033 !important;
    font-size:15px !important;
    box-shadow:none !important;
}

#modal-bookcourse #replyfields textarea{
    min-height:115px !important;
    resize:vertical;
}

#modal-bookcourse #replyfields input:focus,
#modal-bookcourse #replyfields select:focus,
#modal-bookcourse #replyfields textarea:focus{
    outline:0 !important;
    border-color:#155eef !important;
    box-shadow:0 0 0 3px rgba(21,94,239,.10) !important;
}

#modal-bookcourse #replyfields input[type="checkbox"],
#modal-bookcourse #replyfields input[type="radio"]{
    width:18px !important;
    height:18px !important;
}

/* Buttons */
#modal-bookcourse #replyfields button,
#modal-bookcourse #replyfields .btn,
#modal-bookcourse #replyfields input[type="submit"]{
    min-height:50px !important;
    padding:12px 20px !important;
    border-radius:8px !important;
    font-size:15px !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields button[type="submit"],
#modal-bookcourse #replyfields input[type="submit"]{
    min-width:190px !important;
}

/* Timer becomes a proper fixed bottom bar */
#modal-bookcourse #clockdiv{
    position:fixed !important;
    z-index:60 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    top:auto !important;
    width:min(720px,56vw) !important;
    max-width:720px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:14px 30px !important;
    border:0 !important;
    border-top:1px solid #d7e1ea !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:0 -8px 22px rgba(16,24,40,.08) !important;
    color:#344054 !important;
    text-align:left !important;
}

#modal-bookcourse #clockdiv p{
    margin:0 !important;
    font-size:13px !important;
    font-weight:700 !important;
}

#modal-bookcourse #clockdiv p:before{
    content:"Your place is temporarily reserved · ";
    color:#667085;
    font-weight:600;
}

/* Timeout */
#modal-bookcourse #timesup{
    width:100%;
    box-sizing:border-box;
    margin:0 !important;
    padding:22px !important;
    border:1px solid #f5b7b1 !important;
    border-radius:15px !important;
    background:#fff5f4 !important;
    box-shadow:none !important;
}

@media(max-width:1050px){
    #modal-bookcourse .event-booking-drawer{
        width:min(760px,72vw) !important;
        max-width:760px !important;
    }
    #modal-bookcourse #clockdiv{
        width:min(760px,72vw) !important;
        max-width:760px !important;
    }
}

@media(max-width:720px){
    #modal-bookcourse .event-booking-drawer{
        width:100% !important;
        max-width:none !important;
    }

    #modal-bookcourse .event-modal-header{
        padding:20px 18px 16px !important;
    }

    #modal-bookcourse .event-drawer-summary{
        margin:16px 16px 0 !important;
    }

    #modal-bookcourse #courseinfoall{
        padding:18px 16px 92px !important;
    }

    #modal-bookcourse #clockdiv{
        width:100% !important;
        max-width:none !important;
        padding:13px 18px !important;
    }

    #modal-bookcourse #replyfields:not(:empty),
    #modal-bookcourse #bookinginfodetails:not(:empty),
    #modal-bookcourse #waitinglistdetails:not(:empty){
        padding:18px !important;
        border-radius:13px !important;
    }
}



/* =========================================================
   V16 - SIMPLIFIED BOOKING FLOW
   One close button, one content surface, fresh state on reopen.
   ========================================================= */

/* Strip back the drawer shell */
#modal-bookcourse .event-booking-drawer{
    background:#fff !important;
}

#modal-bookcourse .event-modal-header{
    padding:22px 26px !important;
    border-bottom:1px solid #e6ebf0 !important;
    box-shadow:none !important;
}

#modal-bookcourse #courseinfoall{
    padding:24px 26px 96px !important;
    background:#fff !important;
}

/* Hide every legacy close control inside AJAX/timeout content.
   Keep only the new drawer close button. */
#modal-bookcourse .close:not(.event-modal-close){
    display:none !important;
}

/* Remove the stack-of-boxes look */
#modal-bookcourse #bookinginfodetails:not(:empty),
#modal-bookcourse #waitinglistdetails:not(:empty),
#modal-bookcourse #replyfields:not(:empty){
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* Section dividers instead of separate cards */
#modal-bookcourse #bookinginfodetails:not(:empty){
    margin-bottom:22px !important;
    padding-bottom:22px !important;
    border-bottom:1px solid #e8edf2 !important;
}

#modal-bookcourse #waitinglistdetails:not(:empty){
    margin-bottom:22px !important;
    padding:16px 18px !important;
    border:1px solid #fedf89 !important;
    border-radius:12px !important;
    background:#fffaeb !important;
}

#modal-bookcourse #replyfields:not(:empty){
    padding-top:2px !important;
}

#modal-bookcourse #bookinginfodetails:not(:empty):before{
    content:"Selected session" !important;
    display:block !important;
    margin:0 0 12px !important;
    padding:0 !important;
    border:0 !important;
    color:#172033 !important;
    font-size:18px !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields:not(:empty):before{
    content:"Your details" !important;
    display:block !important;
    margin:0 0 18px !important;
    padding:0 !important;
    border:0 !important;
    color:#172033 !important;
    font-size:20px !important;
    font-weight:800 !important;
}

#modal-bookcourse #waitinglistdetails:not(:empty):before{
    content:"Waiting list" !important;
    display:block !important;
    margin:0 0 8px !important;
    padding:0 !important;
    border:0 !important;
    color:#93370d !important;
    font-size:15px !important;
    font-weight:800 !important;
}

/* Empty state before a session is selected */
#modal-bookcourse .event-drawer-empty{
    padding:56px 28px;
    text-align:center;
}

#modal-bookcourse .event-drawer-empty-icon{
    width:58px;
    height:58px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#edf4ff;
    color:#155eef;
    font-size:24px;
}

#modal-bookcourse .event-drawer-empty h3{
    margin:0 0 8px;
    color:#172033;
    font-size:21px;
}

#modal-bookcourse .event-drawer-empty p{
    max-width:430px;
    margin:0 auto;
    color:#667085;
    font-size:14px;
    line-height:1.6;
}

/* Do not show the empty state once AJAX content arrives */
#modal-bookcourse:has(#bookinginfodetails:not(:empty)) .event-drawer-empty,
#modal-bookcourse:has(#replyfields:not(:empty)) .event-drawer-empty,
#modal-bookcourse:has(#waitinglistdetails:not(:empty)) .event-drawer-empty{
    display:none;
}

/* Cleaner fields */
#modal-bookcourse #replyfields input[type="text"],
#modal-bookcourse #replyfields input[type="email"],
#modal-bookcourse #replyfields input[type="tel"],
#modal-bookcourse #replyfields input[type="number"],
#modal-bookcourse #replyfields input[type="date"],
#modal-bookcourse #replyfields select,
#modal-bookcourse #replyfields textarea{
    border-radius:9px !important;
    background:#fff !important;
}

/* Timer bar only appears when JS removes .hidden */
#modal-bookcourse #clockdiv.hidden{
    display:none !important;
}

/* Timeout becomes inline and clean */
#modal-bookcourse #timesup{
    margin:0 !important;
    padding:20px !important;
    border-radius:12px !important;
}

/* Mobile */
@media(max-width:720px){
    #modal-bookcourse #courseinfoall{
        padding:20px 18px 90px !important;
    }
    #modal-bookcourse .event-drawer-empty{
        padding:44px 20px;
    }
}



/* =========================================================
   V17 - DRAWER BODY FULL WIDTH + SELECT REFINEMENT
   ========================================================= */

/* Everything beneath the header should use the full drawer width */
#modal-bookcourse #placestatus,
#modal-bookcourse #courseinfoall,
#modal-bookcourse #bookinginfodetails,
#modal-bookcourse #waitinglistdetails,
#modal-bookcourse #replyfields,
#modal-bookcourse #timesup{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

#modal-bookcourse #courseinfoall{
    margin:0 !important;
    padding:24px 26px 96px !important;
}

#modal-bookcourse #placestatus{
    margin:0 !important;
    padding:0 !important;
}

/* AJAX content sometimes brings old width/column classes with it */
#modal-bookcourse #courseinfoall .columnrow,
#modal-bookcourse #courseinfoall .column100,
#modal-bookcourse #courseinfoall .column75,
#modal-bookcourse #courseinfoall .column50,
#modal-bookcourse #courseinfoall .column33,
#modal-bookcourse #courseinfoall .column25,
#modal-bookcourse #bookinginfodetails > div,
#modal-bookcourse #waitinglistdetails > div,
#modal-bookcourse #replyfields > div,
#modal-bookcourse #replyfields form{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    float:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* Modern select/dropdown */
#modal-bookcourse #replyfields select,
#modal-bookcourse #bookinginfodetails select,
#modal-bookcourse #waitinglistdetails select{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:52px !important;
    min-height:52px !important;
    box-sizing:border-box !important;
    margin:0 0 18px !important;
    padding:0 48px 0 14px !important;
    border:1px solid #cbd5df !important;
    border-radius:9px !important;
    background-color:#fff !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #667085 50%),
        linear-gradient(135deg, #667085 50%, transparent 50%) !important;
    background-position:
        calc(100% - 20px) 22px,
        calc(100% - 15px) 22px !important;
    background-size:5px 5px,5px 5px !important;
    background-repeat:no-repeat !important;
    color:#172033 !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:50px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    box-shadow:none !important;
    cursor:pointer !important;
}

#modal-bookcourse #replyfields select:hover,
#modal-bookcourse #bookinginfodetails select:hover,
#modal-bookcourse #waitinglistdetails select:hover{
    border-color:#98a2b3 !important;
}

#modal-bookcourse #replyfields select:focus,
#modal-bookcourse #bookinginfodetails select:focus,
#modal-bookcourse #waitinglistdetails select:focus{
    outline:0 !important;
    border-color:#155eef !important;
    box-shadow:0 0 0 3px rgba(21,94,239,.10) !important;
}

/* Make any session selector at the top feel like the main action */
#modal-bookcourse #bookinginfodetails select:first-of-type{
    height:56px !important;
    min-height:56px !important;
    border-color:#b9c8da !important;
    background-color:#f9fbfd !important;
    font-size:16px !important;
    font-weight:700 !important;
}

@media(max-width:720px){
    #modal-bookcourse #courseinfoall{
        padding:20px 18px 90px !important;
    }
}






/* =========================================================
   V20 - HEADER THUMBNAIL
   Compact course image beside the drawer heading.
   ========================================================= */

#modal-bookcourse .event-modal-header{
    align-items:center !important;
}

#modal-bookcourse .event-modal-heading{
    flex:1 1 auto;
    min-width:0;
}

#modal-bookcourse .event-modal-header-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:12px;
}

#modal-bookcourse .event-modal-thumb{
    width:96px;
    height:68px;
    overflow:hidden;
    border-radius:10px;
    background:#e9eef3;
    border:1px solid #dfe5eb;
}

#modal-bookcourse .event-modal-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

@media(max-width:720px){
    #modal-bookcourse .event-modal-thumb{
        width:72px;
        height:54px;
        border-radius:8px;
    }

    #modal-bookcourse .event-modal-header-actions{
        gap:8px;
    }
}

@media(max-width:520px){
    #modal-bookcourse .event-modal-thumb{
        display:none;
    }
}



/* =========================================================
   V21 - REMOVE DUPLICATE DRAWER IMAGE + SMART SESSION CHOOSER
   ========================================================= */

/* The only image in the drawer should be the compact header thumbnail */
#modal-bookcourse #bookinginfodetails img,
#modal-bookcourse #waitinglistdetails img,
#modal-bookcourse #replyfields img{
    display:none !important;
}

/* Smart session chooser */
#modal-bookcourse .event-session-select-wrap{
    margin-bottom:20px;
}

#modal-bookcourse .event-session-select-wrap label{
    display:block;
    margin-bottom:7px;
    color:#344054;
    font-size:13px;
    font-weight:800;
}



/* =========================================================
   V22 - SINGLE SESSION CONTROL + CLEAN MODAL BODY
   ========================================================= */

/* Drawer header is the only modal title */
#modal-bookcourse #bookinginfodetails h1,
#modal-bookcourse #bookinginfodetails h2,
#modal-bookcourse #bookinginfodetails h3,
#modal-bookcourse #bookinginfodetails hr,
#modal-bookcourse #replyfields > h1,
#modal-bookcourse #replyfields > h2,
#modal-bookcourse #replyfields > h3,
#modal-bookcourse #replyfields > hr{
    display:none !important;
}




/* =========================================================
   V24 - SAFE SMART SESSION SELECTOR
   <=5 sessions = clickable choices, 6+ = dropdown
   ========================================================= */

#modal-bookcourse select.event-session-hidden{
    display:none !important;
}

/* =========================================================
   V25 - GUARANTEED SINGLE SESSION CONTROL
   ========================================================= */

/* =========================================================
   V26 - SIMPLER DRAWER CONTENT
   Remove redundant session summary + Audience/Sub-cover.
   ========================================================= */

/* Hide legacy Audience/Sub-cover rows if returned in the booking form */
#modal-bookcourse #replyfields .event-booking-audience,
#modal-bookcourse #replyfields .event-booking-subcover,
#modal-bookcourse #waitinglistdetails .event-booking-audience,
#modal-bookcourse #waitinglistdetails .event-booking-subcover{
    display:none !important;
}



/* =========================================================
   V27 - GENERIC SESSION WORDING + 10 MINUTE TIMER VISIBILITY
   ========================================================= */

/* Reservation timer should be visible whenever the existing JS reveals #clockdiv */
#modal-bookcourse #clockdiv{
    display:block;
    position:fixed !important;
    z-index:60 !important;
    right:0 !important;
    bottom:0 !important;
    left:auto !important;
    top:auto !important;
    width:min(720px,56vw) !important;
    max-width:720px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:14px 30px !important;
    border:0 !important;
    border-top:1px solid #d7e1ea !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:0 -8px 22px rgba(16,24,40,.08) !important;
    color:#344054 !important;
    text-align:left !important;
}

#modal-bookcourse #clockdiv.hidden{
    display:none !important;
}

#modal-bookcourse #clockdiv p{
    margin:0 !important;
    font-size:13px !important;
    font-weight:700 !important;
}

#modal-bookcourse #clockdiv p:before{
    content:"Your place is held for 10 minutes · ";
    color:#667085;
    font-weight:600;
}

@media(max-width:1050px){
    #modal-bookcourse #clockdiv{
        width:min(760px,72vw) !important;
        max-width:760px !important;
    }
}

@media(max-width:720px){
    #modal-bookcourse #clockdiv{
        width:100% !important;
        max-width:none !important;
        padding:13px 18px !important;
    }
}



/* =========================================================
   V28 - RESTORE MODAL CONTENT
   ========================================================= */

#modal-bookcourse #bookinginfodetails{
    display:block !important;
}

#modal-bookcourse #bookinginfodetails:empty{
    display:none !important;
}

/* Keep the body clean without hiding its actual contents */
#modal-bookcourse #bookinginfodetails h1:first-child,
#modal-bookcourse #bookinginfodetails h2:first-child,
#modal-bookcourse #bookinginfodetails h3:first-child,
#modal-bookcourse #bookinginfodetails hr:first-of-type{
    display:none !important;
}



/* =========================================================
   V31 - INLINE BOOKING MESSAGES (NO BROWSER ALERTS)
   ========================================================= */

#modal-bookcourse .event-booking-notice{
    display:none;
    margin:20px 26px 0;
    padding:13px 16px;
    border:1px solid #f5c2c0;
    border-radius:10px;
    background:#fff4f3;
    color:#912018;
    font-size:14px;
    font-weight:700;
    line-height:1.45;
}

#modal-bookcourse .event-booking-notice.show{
    display:block;
}

@media(max-width:720px){
    #modal-bookcourse .event-booking-notice{
        margin:16px 18px 0;
    }
}



/* =========================================================
   V32 - SINGLE DRAWER CLOSE BUTTON
   ========================================================= */

/* Keep only the dedicated drawer-header close control */
#modal-bookcourse .close:not(.event-modal-close),
#modal-bookcourse button.close:not(.event-modal-close),
#modal-bookcourse a.close:not(.event-modal-close){
    display:none !important;
}



/* V33 - hide the actual legacy AJAX close button */
#modal-bookcourse .closebutton.closebooking{
    display:none !important;
}



/* =========================================================
   V39 - NATIVE SESSION SELECT STAYS HIDDEN FOR CARD MODE
   This must beat the generic bookinginfodetails select rule.
   ========================================================= */

#modal-bookcourse #bookinginfodetails select.booking-session-native-hidden{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
    position:absolute !important;
    left:-9999px !important;
}



/* V40 - AJAX form owns Your Details and fills drawer width */
#modal-bookcourse #replyfields:not(:empty):before{content:none !important;display:none !important;}
#modal-bookcourse #replyfields,
#modal-bookcourse #replyfields:not(:empty),
#modal-bookcourse #replyfields #bookcourse_complete,
#modal-bookcourse #replyfields .booking-details-form{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
}
#modal-bookcourse #replyfields:not(:empty){
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}



/* =========================================================
   VALIDATION SCROLL OFFSET
   Keep invalid/focused fields clear of the sticky drawer header.
   ========================================================= */

#modal-bookcourse #replyfields input,
#modal-bookcourse #replyfields select,
#modal-bookcourse #replyfields textarea,
#modal-bookcourse #replyfields .field-wrapper{
    scroll-margin-top:120px !important;
}

#modal-bookcourse #replyfields input:invalid,
#modal-bookcourse #replyfields select:invalid,
#modal-bookcourse #replyfields textarea:invalid{
    scroll-margin-top:140px !important;
}



/* Validation should reveal the field label as well as the control */
#modal-bookcourse #replyfields .field-wrapper{
    scroll-margin-top:165px !important;
}

#modal-bookcourse #replyfields .field-wrapper:has(input:invalid),
#modal-bookcourse #replyfields .field-wrapper:has(select:invalid),
#modal-bookcourse #replyfields .field-wrapper:has(textarea:invalid){
    scroll-margin-top:175px !important;
}



/* Booking result actions */
#modal-bookcourse .booking-result-actions{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    margin-top:18px !important;
}

#modal-bookcourse .booking-result-actions .booking-change-attendee{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:48px !important;
    padding:12px 18px !important;
    border:1px solid #155eef !important;
    border-radius:9px !important;
    background:#155eef !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    box-shadow:none !important;
    cursor:pointer !important;
}

#modal-bookcourse .booking-result-actions .booking-change-attendee:hover{
    background:#004eeb !important;
    border-color:#004eeb !important;
}

#modal-bookcourse .booking-result-actions .booking-result-close{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:48px !important;
    padding:12px 18px !important;
    border:1px solid #cbd5df !important;
    border-radius:9px !important;
    background:#fff !important;
    color:#344054 !important;
    font-size:14px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    box-shadow:none !important;
    cursor:pointer !important;
}

#modal-bookcourse .booking-result-actions .booking-result-close:hover{
    background:#f8fafc !important;
    border-color:#98a2b3 !important;
}

@media(max-width:520px){
    #modal-bookcourse .booking-result-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    #modal-bookcourse .booking-result-actions button{
        width:100% !important;
    }
}




/* =========================================================
   BOOKING RESULT CARD - REFINED
   ========================================================= */

#modal-bookcourse .booking-result-card{
    display:flex !important;
    align-items:flex-start !important;
    gap:14px !important;
    width:100% !important;
    margin:18px 0 0 !important;
    padding:18px 20px !important;
    box-sizing:border-box !important;
    border:1px solid #d9e1ea !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:0 8px 20px rgba(16,24,40,.06) !important;
}

#modal-bookcourse .booking-result-warning{
    border-color:#f4d7a1 !important;
    background:#fffdf8 !important;
}

#modal-bookcourse .booking-result-success{
    border-color:#b7e4c7 !important;
    background:#f8fffb !important;
}

#modal-bookcourse .booking-result-error{
    border-color:#fecaca !important;
    background:#fffafa !important;
}

#modal-bookcourse .booking-result-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 40px !important;
    width:40px !important;
    height:40px !important;
    border-radius:10px !important;
    background:#fff4e5 !important;
    color:#b54708 !important;
    font-size:20px !important;
}

#modal-bookcourse .booking-result-success .booking-result-icon{
    background:#ecfdf3 !important;
    color:#027a48 !important;
}

#modal-bookcourse .booking-result-copy{
    flex:1 1 auto !important;
    min-width:0 !important;
}

#modal-bookcourse .booking-result-kicker{
    display:block !important;
    margin:0 0 5px !important;
    color:#667085 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

#modal-bookcourse .booking-result-copy h2{
    margin:0 0 7px !important;
    color:#172033 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}

#modal-bookcourse .booking-result-copy p{
    margin:0 !important;
    color:#475467 !important;
    font-size:14px !important;
    line-height:1.55 !important;
}

#modal-bookcourse .booking-result-note{
    margin-top:14px !important;
    padding:11px 13px !important;
    border:1px solid #e5e7eb !important;
    border-radius:9px !important;
    background:#f8fafc !important;
    color:#475467 !important;
    font-size:12px !important;
    line-height:1.5 !important;
}

#modal-bookcourse .booking-result-note strong{
    color:#25324b !important;
}

#modal-bookcourse .booking-result-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:14px !important;
}

#modal-bookcourse .booking-result-actions .booking-change-attendee,
#modal-bookcourse .booking-result-actions .booking-result-close{
    min-height:44px !important;
    padding:10px 15px !important;
}

#modal-bookcourse .booking-result-actions .booking-change-attendee{
    background:#155eef !important;
    border-color:#155eef !important;
    color:#fff !important;
}

#modal-bookcourse .booking-result-actions .booking-result-close{
    background:#fff !important;
    border:1px solid #cbd5df !important;
    color:#344054 !important;
}

#modal-bookcourse .booking-result-server h1,
#modal-bookcourse .booking-result-server h2,
#modal-bookcourse .booking-result-server h3,
#modal-bookcourse .booking-result-server h4{
    margin:0 0 8px !important;
    color:#172033 !important;
    font-size:18px !important;
    line-height:1.35 !important;
}

#modal-bookcourse .booking-result-server p{
    margin:6px 0 !important;
    color:#475467 !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

#modal-bookcourse .booking-result-server .float75,
#modal-bookcourse .booking-result-server .float25{
    float:none !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
}

#modal-bookcourse .booking-result-server hr{
    margin:14px 0 !important;
    border:0 !important;
    border-top:1px solid #e5e7eb !important;
}

#modal-bookcourse .booking-result-server button,
#modal-bookcourse .booking-result-server .btn{
    margin-top:12px !important;
}

@media(max-width:520px){
    #modal-bookcourse .booking-result-card{
        display:block !important;
        padding:16px !important;
    }

    #modal-bookcourse .booking-result-icon{
        margin-bottom:12px !important;
    }

    #modal-bookcourse .booking-result-actions{
        gap:8px !important;
    }

    #modal-bookcourse .booking-result-actions button{
        width:auto !important;
        flex:1 1 auto !important;
    }
}





/* =========================================================
   FULLY BOOKED / WAITING LIST PANEL
   ========================================================= */

#modal-bookcourse .booking-full{
    position:relative !important;
    width:100% !important;
    margin:20px 0 0 !important;
    padding:17px 18px 18px 58px !important;
    box-sizing:border-box !important;
    border:1px solid #fed7aa !important;
    border-radius:12px !important;
    background:#fffbf5 !important;
}

#modal-bookcourse .booking-full:before{
    content:"\f073";
    font-family:FontAwesome;
    position:absolute;
    top:18px;
    left:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:8px;
    background:#fff1dc;
    color:#b54708;
    font-size:14px;
}

#modal-bookcourse .booking-full h4{
    margin:0 0 4px !important;
    color:#172033 !important;
    font-size:16px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

#modal-bookcourse .booking-full > p{
    margin:0 0 12px !important;
    color:#667085 !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

#modal-bookcourse .booking-full-item{
    display:block !important;
    margin:0 0 12px !important;
    padding:10px 12px !important;
    border:1px solid #f1e1ca !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#344054 !important;
    font-size:13px !important;
    line-height:1.45 !important;
    font-weight:750 !important;
}

#modal-bookcourse .booking-waiting-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    margin:0 !important;
    padding:9px 14px !important;
    border:1px solid #155eef !important;
    border-radius:8px !important;
    background:#155eef !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:none !important;
}

#modal-bookcourse .booking-waiting-link:hover,
#modal-bookcourse .booking-waiting-link:focus{
    border-color:#004eeb !important;
    background:#004eeb !important;
    color:#fff !important;
    text-decoration:none !important;
}

@media(max-width:520px){
    #modal-bookcourse .booking-full{
        padding:16px !important;
    }

    #modal-bookcourse .booking-full:before{
        position:static !important;
        margin-bottom:10px !important;
    }

    #modal-bookcourse .booking-waiting-link{
        width:100% !important;
    }
}




#pagecontainer .booking-full-main{
    width:100% !important;
    margin:22px 0 0 !important;
    padding:20px !important;
    box-sizing:border-box !important;
    border:1px solid #fed7aa !important;
    border-radius:14px !important;
    background:#fffbf5 !important;
}
#pagecontainer .booking-full-main-heading{margin:0 0 14px !important;}
#pagecontainer .booking-full-main-heading h3{
    margin:2px 0 5px !important;
    color:#172033 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}
#pagecontainer .booking-full-main-heading p{
    margin:0 !important;
    max-width:720px !important;
    color:#667085 !important;
    font-size:13px !important;
    line-height:1.5 !important;
}
#pagecontainer .booking-full-main-list{
    display:grid !important;
    gap:8px !important;
    margin:0 0 14px !important;
}
#pagecontainer .booking-full-main .booking-full-item{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    width:100% !important;
    margin:0 !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
    border:1px solid #f0dfc6 !important;
    border-radius:10px !important;
    background:#fff !important;
    color:#344054 !important;
}
#pagecontainer .booking-full-item-copy{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:6px 16px !important;
    min-width:0 !important;
}
#pagecontainer .booking-full-item-copy strong{
    color:#172033 !important;
    font-size:14px !important;
    font-weight:800 !important;
}
#pagecontainer .booking-full-item-copy span{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    color:#667085 !important;
    font-size:12px !important;
}
#pagecontainer .booking-full-item-copy .fa{color:#b54708 !important;}
#pagecontainer .booking-full-badge{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    padding:5px 8px !important;
    border-radius:999px !important;
    background:#fff1e6 !important;
    color:#b54708 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
}
#pagecontainer .booking-full-main .booking-waiting-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:10px 15px !important;
    border:1px solid #155eef !important;
    border-radius:9px !important;
    background:#155eef !important;
    color:#fff !important;
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-decoration:none !important;
}
#pagecontainer .booking-full-main .booking-waiting-link:hover,
#pagecontainer .booking-full-main .booking-waiting-link:focus{
    border-color:#004eeb !important;
    background:#004eeb !important;
    color:#fff !important;
}
@media(max-width:640px){
    #pagecontainer .booking-full-main{padding:16px !important;}
    #pagecontainer .booking-full-main .booking-full-item{align-items:flex-start !important;}
    #pagecontainer .booking-full-item-copy{display:grid !important;gap:5px !important;}
    #pagecontainer .booking-full-main .booking-waiting-link{width:100% !important;}
}




/* Waiting-list action per full session */
#pagecontainer .booking-full-item-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:9px !important;
    flex:0 0 auto !important;
}

#pagecontainer .booking-full-main .booking-waiting-session{
    min-height:36px !important;
    padding:8px 11px !important;
    border-radius:8px !important;
    font-size:12px !important;
    white-space:nowrap !important;
}

/* Redesigned waiting-list drawer */
#modal-bookcourse .waiting-drawer-panel{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

#modal-bookcourse .waiting-drawer-intro{
    margin:0 0 18px !important;
}

#modal-bookcourse .waiting-drawer-kicker{
    display:block !important;
    margin:0 0 6px !important;
    color:#b54708 !important;
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

#modal-bookcourse .waiting-drawer-intro h2{
    margin:0 0 7px !important;
    color:#172033 !important;
    font-size:22px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}

#modal-bookcourse .waiting-drawer-intro p{
    margin:0 !important;
    color:#667085 !important;
    font-size:14px !important;
    line-height:1.55 !important;
}

#modal-bookcourse .waiting-selected-session{
    width:100% !important;
    margin:0 0 16px !important;
    padding:16px 18px !important;
    box-sizing:border-box !important;
    border:1px solid #fed7aa !important;
    border-left:4px solid #f79009 !important;
    border-radius:11px !important;
    background:#fffbf5 !important;
}

#modal-bookcourse .waiting-selected-label{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    margin:0 0 8px !important;
    color:#b54708 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.07em !important;
    text-transform:uppercase !important;
}

#modal-bookcourse .waiting-selected-session h3{
    margin:0 0 10px !important;
    color:#172033 !important;
    font-size:18px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

#modal-bookcourse .waiting-selected-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px 18px !important;
}

#modal-bookcourse .waiting-selected-meta span{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    color:#475467 !important;
    font-size:13px !important;
}

#modal-bookcourse .waiting-selected-meta .fa{
    color:#b54708 !important;
}

#modal-bookcourse .waiting-list-note{
    display:flex !important;
    gap:10px !important;
    margin:0 0 18px !important;
    padding:12px 14px !important;
    border:1px solid #e4e7ec !important;
    border-radius:9px !important;
    background:#f8fafc !important;
    color:#475467 !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

#modal-bookcourse .waiting-list-note .fa{
    flex:0 0 auto !important;
    margin-top:2px !important;
    color:#667085 !important;
}

#modal-bookcourse .waiting-reserve-action{
    width:100% !important;
}

#modal-bookcourse .waiting-reserve-action .btn{
    width:100% !important;
    min-height:50px !important;
    margin:0 !important;
}

@media(max-width:640px){
    #pagecontainer .booking-full-main .booking-full-item{
        display:block !important;
    }

    #pagecontainer .booking-full-item-actions{
        justify-content:space-between !important;
        margin-top:10px !important;
    }

    #pagecontainer .booking-full-main .booking-waiting-session{
        flex:1 1 auto !important;
    }

    #modal-bookcourse .waiting-selected-meta{
        display:grid !important;
        gap:7px !important;
    }
}





/* =========================================================
   WAITING-LIST FORM STAGE
   Restyle legacy bookwaitinglistplacenew.php response.
   ========================================================= */

#modal-bookcourse #replyfields.waiting-list-form-stage{
    width:100% !important;
    max-width:none !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    color:#172033 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage > .float75:first-child{
    position:relative !important;
    width:100% !important;
    float:none !important;
    margin:0 0 24px !important;
    padding:17px 19px !important;
    box-sizing:border-box !important;
    border:1px solid #fed7aa !important;
    border-left:4px solid #f79009 !important;
    border-radius:11px !important;
    background:#fffbf5 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage > .float75:first-child:before{
    content:"Waiting-list booking";
    display:block !important;
    margin:0 0 7px !important;
    color:#b54708 !important;
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage > .float75:first-child h1{
    margin:0 0 6px !important;
    padding:0 !important;
    color:#172033 !important;
    font-size:21px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage > .float75:first-child h3{
    display:inline-block !important;
    margin:0 10px 8px 0 !important;
    padding:4px 7px !important;
    border:1px solid #f1d7ad !important;
    border-radius:6px !important;
    background:#fff !important;
    color:#b54708 !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage > .float75:first-child h2.red{
    margin:13px 0 0 !important;
    padding-top:12px !important;
    border-top:1px solid #f3ddbd !important;
    color:#b54708 !important;
    font-size:12px !important;
    line-height:1.3 !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage > .float25:first-of-type{
    display:none !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage > hr{
    display:none !important;
}

/* Form becomes a single clean column */
#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete > .wrapper.float75{
    width:100% !important;
    max-width:none !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete > .wrapper.float75 > h4{
    margin:0 0 18px !important;
    padding:0 0 14px !important;
    border-bottom:1px solid #e4e7ec !important;
    color:#172033 !important;
    font-size:18px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete > .wrapper.float75 > h4 .red{
    color:#b42318 !important;
    font-size:10px !important;
    font-weight:850 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
}

/* Match normal booking field design */
#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    margin:0 !important;
    padding:0 0 21px !important;
    box-sizing:border-box !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper label.textlabel{
    display:block !important;
    width:100% !important;
    margin:0 0 8px !important;
    color:#25324b !important;
    font-size:14px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper label .red{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-right:3px !important;
    color:#b42318 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .text-field-input{
    display:block !important;
    width:100% !important;
    min-height:50px !important;
    margin:0 !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
    border:1px solid #cbd5df !important;
    border-radius:9px !important;
    background:#fff !important;
    color:#172033 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
    box-shadow:none !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .text-field-input:focus{
    outline:0 !important;
    border-color:#155eef !important;
    box-shadow:0 0 0 3px rgba(21,94,239,.10) !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper > .fa-info-circle{
    display:none !important;
}

/* Legacy loader */
#modal-bookcourse #replyfields.waiting-list-form-stage .load{
    display:none;
}

/* Terms / important note becomes full-width footer */
#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete > .float25{
    width:100% !important;
    float:none !important;
    margin:5px 0 0 !important;
    padding:0 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete > .float25 .bglightgrey{
    margin:0 0 10px !important;
    padding:12px 14px !important;
    border:1px solid #e4e7ec !important;
    border-radius:9px !important;
    background:#f8fafc !important;
    color:#667085 !important;
    font-size:12px !important;
    line-height:1.5 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete > .float25 > p{
    margin:0 !important;
    padding:12px 14px !important;
    border:1px solid #dbe5f0 !important;
    border-radius:9px !important;
    background:#f5f8ff !important;
    color:#475467 !important;
    font-size:12px !important;
    line-height:1.5 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete > .float25 > p b{
    color:#25324b !important;
}

/* Submit area */
#modal-bookcourse #replyfields.waiting-list-form-stage .middle{
    width:100% !important;
    margin:0 !important;
    text-align:left !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage input[type="submit"]{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:50px !important;
    margin:6px 0 16px !important;
    padding:12px 18px !important;
    border:1px solid #155eef !important;
    border-radius:9px !important;
    background:#155eef !important;
    color:#fff !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
    cursor:pointer !important;
    box-shadow:none !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage input[type="submit"]:hover,
#modal-bookcourse #replyfields.waiting-list-form-stage input[type="submit"]:focus{
    border-color:#004eeb !important;
    background:#004eeb !important;
    color:#fff !important;
}

/* Clear old floats safely */
#modal-bookcourse #replyfields.waiting-list-form-stage:after,
#modal-bookcourse #replyfields.waiting-list-form-stage #bookcourse_complete:after{
    content:"";
    display:block;
    clear:both;
}

@media(max-width:600px){
    #modal-bookcourse #replyfields.waiting-list-form-stage > .float75:first-child{
        padding:15px !important;
    }

    #modal-bookcourse #replyfields.waiting-list-form-stage > .float75:first-child h1{
        font-size:19px !important;
    }
}





/* =========================================================
   WAITING LIST FORM - MATCH MAIN BOOKING FORM
   ========================================================= */

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    float:none !important;
    margin:0 !important;
    padding:0 0 22px !important;
    box-sizing:border-box !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper label.textlabel{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    width:100% !important;
    margin:0 0 8px !important;
    color:#25324b !important;
    font-size:14px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper label.textlabel .red.bold{
    display:none !important;
}


#modal-bookcourse #replyfields.waiting-list-form-stage .text-field-input,
#modal-bookcourse #replyfields.waiting-list-form-stage input[type="text"],
#modal-bookcourse #replyfields.waiting-list-form-stage input[type="email"],
#modal-bookcourse #replyfields.waiting-list-form-stage select,
#modal-bookcourse #replyfields.waiting-list-form-stage textarea{
    display:block !important;
    width:100% !important;
    min-height:50px !important;
    margin:0 !important;
    padding:12px 14px !important;
    box-sizing:border-box !important;
    border:1px solid #cbd5df !important;
    border-radius:9px !important;
    background:#fff !important;
    color:#172033 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
    box-shadow:none !important;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage textarea{
    min-height:110px !important;
    resize:vertical !important;
}


#modal-bookcourse #replyfields.waiting-list-form-stage .text-field-input:hover,
#modal-bookcourse #replyfields.waiting-list-form-stage input[type="text"]:hover,
#modal-bookcourse #replyfields.waiting-list-form-stage input[type="email"]:hover,
#modal-bookcourse #replyfields.waiting-list-form-stage select:hover,
#modal-bookcourse #replyfields.waiting-list-form-stage textarea:hover{
    border-color:#98a2b3 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .text-field-input:focus,
#modal-bookcourse #replyfields.waiting-list-form-stage input[type="text"]:focus,
#modal-bookcourse #replyfields.waiting-list-form-stage input[type="email"]:focus,
#modal-bookcourse #replyfields.waiting-list-form-stage select:focus,
#modal-bookcourse #replyfields.waiting-list-form-stage textarea:focus{
    outline:0 !important;
    border-color:#155eef !important;
    background:#fff !important;
    box-shadow:0 0 0 3px rgba(21,94,239,.10) !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage input::placeholder,
#modal-bookcourse #replyfields.waiting-list-form-stage textarea::placeholder{
    color:#98a2b3 !important;
    font-weight:500 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage #notificationarea{
    margin-top:8px !important;
    font-size:12px !important;
    line-height:1.45 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper.focused label.textlabel{
    color:#155eef !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper:focus-within label.textlabel{
    color:#155eef !important;
}





/* =========================================================
   WAITING LIST LABEL POSITION FIX
   Prevent legacy/floating label rules from overlapping inputs.
   ========================================================= */

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper{
    display:block !important;
    position:relative !important;
    padding-top:0 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper > label.textlabel{
    position:static !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    z-index:auto !important;
    transform:none !important;
    -webkit-transform:none !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 0 8px 0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;

    color:#25324b !important;
    font-size:14px !important;
    line-height:1.35 !important;
    font-weight:800 !important;

    pointer-events:auto !important;
    opacity:1 !important;
}

/* Keep the label in the same place on focus / populated fields */
#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper.focused > label.textlabel,
#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper:focus-within > label.textlabel{
    position:static !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    margin:0 0 8px 0 !important;
    padding:0 !important;
    background:transparent !important;
    color:#25324b !important;
    font-size:14px !important;
}

/* Ensure the control always starts below the label */
#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper > input,
#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper > select,
#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper > textarea{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    margin-top:0 !important;
}





/* =========================================================
   BOOKING OPTION NO LONGER AVAILABLE
   ========================================================= */

#modal-bookcourse #placestatus{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
}

#modal-bookcourse #placestatus > .middle{
    position:relative !important;
    width:100% !important;
    margin:0 !important;
    padding:22px 22px 22px 72px !important;
    box-sizing:border-box !important;
    border:1px solid #fecdca !important;
    border-radius:12px !important;
    background:#fffbfa !important;
    text-align:left !important;
}

#modal-bookcourse #placestatus > .middle:before{
    content:"\f05a";
    font-family:FontAwesome;
    position:absolute !important;
    top:22px !important;
    left:20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:36px !important;
    height:36px !important;
    border-radius:50% !important;
    background:#fee4e2 !important;
    color:#b42318 !important;
    font-size:17px !important;
}

#modal-bookcourse #placestatus > .middle h2{
    margin:0 0 7px !important;
    padding:0 !important;
    color:#912018 !important;
    font-size:19px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

#modal-bookcourse #placestatus > .middle p{
    margin:0 0 15px !important;
    padding:0 !important;
    color:#667085 !important;
    font-size:13px !important;
    line-height:1.55 !important;
}

#modal-bookcourse #placestatus > .middle p:last-child{
    margin:0 !important;
}

#modal-bookcourse #placestatus .backtocourses{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:42px !important;
    padding:9px 14px !important;
    box-sizing:border-box !important;
    border:1px solid #d0d5dd !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#344054 !important;
    font-size:13px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
}

#modal-bookcourse #placestatus .backtocourses:hover,
#modal-bookcourse #placestatus .backtocourses:focus{
    border-color:#98a2b3 !important;
    background:#f9fafb !important;
    color:#172033 !important;
    text-decoration:none !important;
}

#modal-bookcourse #placestatus .backtocourses .fa{
    color:#667085 !important;
    font-size:12px !important;
}

@media(max-width:520px){
    #modal-bookcourse #placestatus > .middle{
        padding:18px !important;
    }

    #modal-bookcourse #placestatus > .middle:before{
        position:static !important;
        margin:0 0 12px !important;
    }

    #modal-bookcourse #placestatus .backtocourses{
        width:100% !important;
    }
}





/* =========================================================
   BOOKING FORM - SELECTED SESSION SUMMARY
   Restore prominent modern session treatment.
   ========================================================= */

#modal-bookcourse #replyfields .booking-details-summary{
    width:100% !important;
    margin:0 0 22px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    border:0 !important;
    background:transparent !important;
}

#modal-bookcourse #replyfields .booking-details-summary-copy{
    position:relative !important;
    width:100% !important;
    margin:0 !important;
    padding:18px 20px 18px 24px !important;
    box-sizing:border-box !important;
    border:1px solid #c7d7fe !important;
    border-left:4px solid #155eef !important;
    border-radius:11px !important;
    background:#f5f8ff !important;
}

#modal-bookcourse #replyfields .booking-details-summary-copy:before{
    content:"Selected session";
    display:block !important;
    margin:0 0 8px !important;
    color:#155eef !important;
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

#modal-bookcourse #replyfields .booking-details-summary h2{
    margin:0 0 8px !important;
    padding:0 !important;
    color:#172033 !important;
    font-size:20px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

#modal-bookcourse #replyfields .booking-details-summary h3{
    display:inline-flex !important;
    align-items:center !important;
    margin:0 0 12px !important;
    padding:5px 8px !important;
    border:1px solid #c7d7fe !important;
    border-radius:6px !important;
    background:#fff !important;
    color:#155eef !important;
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
}

#modal-bookcourse #replyfields .booking-details-summary p{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:6px 0 0 !important;
    padding:0 !important;
    color:#475467 !important;
    font-size:13px !important;
    line-height:1.45 !important;
    font-weight:600 !important;
}

#modal-bookcourse #replyfields .booking-details-summary p .fa{
    width:15px !important;
    flex:0 0 15px !important;
    color:#155eef !important;
    text-align:center !important;
}

/* Make the actual session title stand out more than the course title */
#modal-bookcourse #replyfields .booking-details-summary h3{
    font-size:14px !important;
    padding:6px 9px !important;
}

@media(max-width:520px){
    #modal-bookcourse #replyfields .booking-details-summary-copy{
        padding:16px !important;
    }

    #modal-bookcourse #replyfields .booking-details-summary h2{
        font-size:18px !important;
    }
}





/* =========================================================
   BOOKING FORM SESSION SUMMARY - WAITING-LIST STYLE
   ========================================================= */
#modal-bookcourse #replyfields .booking-details-summary{
    width:100% !important;
    margin:0 0 22px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
}

#modal-bookcourse #replyfields .booking-details-summary-copy{
    width:100% !important;
    margin:0 !important;
    padding:18px 20px !important;
    box-sizing:border-box !important;
    border:1px solid #dbe5f0 !important;
    border-radius:11px !important;
    background:#f8fafc !important;
}

#modal-bookcourse #replyfields .booking-details-summary-copy:before{
    display:none !important;
    content:none !important;
}

#modal-bookcourse #replyfields .booking-details-summary h2{
    margin:0 0 8px !important;
    padding:0 !important;
    color:#172033 !important;
    font-size:21px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

#modal-bookcourse #replyfields .booking-details-summary h3{
    display:block !important;
    width:auto !important;
    margin:0 0 8px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#155eef !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:850 !important;
}

#modal-bookcourse #replyfields .booking-details-summary p{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin:5px 0 0 !important;
    padding:0 !important;
    color:#475467 !important;
    font-size:13px !important;
    line-height:1.5 !important;
    font-weight:600 !important;
}

#modal-bookcourse #replyfields .booking-details-summary p .fa{
    width:15px !important;
    flex:0 0 15px !important;
    color:#667085 !important;
    text-align:center !important;
}

@media(max-width:520px){
    #modal-bookcourse #replyfields .booking-details-summary-copy{
        padding:16px !important;
    }
    #modal-bookcourse #replyfields .booking-details-summary h2{
        font-size:19px !important;
    }
}





/* =========================================================
   NORMAL BOOKING SUMMARY - MATCH WAITING LIST SUMMARY EXACTLY
   ========================================================= */

#modal-bookcourse #replyfields .booking-details-summary{
    width:100% !important;
    margin:0 0 20px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
}

#modal-bookcourse #replyfields .booking-details-summary-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

#modal-bookcourse #replyfields .booking-details-summary-copy:before{
    display:none !important;
    content:none !important;
}

#modal-bookcourse #replyfields .booking-details-summary h2{
    margin:0 0 6px !important;
    padding:0 !important;
    color:#172033 !important;
    font-size:28px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields .booking-details-summary h3{
    display:block !important;
    margin:0 0 4px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#155eef !important;
    font-size:18px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
}

#modal-bookcourse #replyfields .booking-details-summary p{
    display:block !important;
    margin:2px 0 !important;
    padding:0 !important;
    color:#172033 !important;
    font-size:14px !important;
    line-height:1.5 !important;
    font-weight:400 !important;
}

/* Hide the icons so the lines read like the waiting-list version */
#modal-bookcourse #replyfields .booking-details-summary p .fa{
    display:none !important;
}

/* Add the same simple labels used in the waiting-list summary */
#modal-bookcourse #replyfields .booking-details-summary p:nth-of-type(2):before{
    content:"Dates: ";
    font-weight:400 !important;
}

@media(max-width:520px){
    #modal-bookcourse #replyfields .booking-details-summary h2{
        font-size:23px !important;
    }

    #modal-bookcourse #replyfields .booking-details-summary h3{
        font-size:16px !important;
    }
}





/* =========================================================
   CLICKABLE AVAILABLE SESSION - LIVE STYLES
   ========================================================= */

#pagecontainer .bookable-session-card,
#pagecontainer .bookable-session-card *{
    cursor:pointer !important;
}

#pagecontainer .bookable-session-card{
    position:relative;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}

#pagecontainer .bookable-session-card:hover,
#pagecontainer .bookable-session-card:focus{
    outline:0 !important;
    transform:translateY(-2px) !important;
    border-color:#a9bfdc !important;
    box-shadow:0 12px 30px rgba(16,24,40,.10) !important;
}

#pagecontainer .bookable-session-card .event-session-availability{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:10px !important;
    padding:18px 20px !important;
    box-sizing:border-box !important;
}

#pagecontainer .bookable-session-card .session-book-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-width:90px !important;
    min-height:40px !important;
    padding:10px 16px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border:1px solid #155eef !important;
    border-radius:8px !important;
    background:#155eef !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    box-shadow:0 2px 5px rgba(21,94,239,.18) !important;
}

#pagecontainer .bookable-session-card .session-book-btn span,
#pagecontainer .bookable-session-card .session-book-btn i{
    color:#fff !important;
}

#pagecontainer .bookable-session-card:hover .session-book-btn,
#pagecontainer .bookable-session-card:focus .session-book-btn{
    background:#0f4fc9 !important;
    border-color:#0f4fc9 !important;
    transform:translateX(2px) !important;
}

@media(max-width:780px){
    #pagecontainer .bookable-session-card .event-session-availability{
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
    }
}





/* =========================================================
   BOOKING DRAWER - CLEAR SELECTED SESSION SUMMARY
   ========================================================= */
#modal-bookcourse .booking-details-summary{
    margin:0 0 20px !important;
    padding:0 !important;
    border:1px solid #e1e7ee !important;
    border-radius:12px !important;
    background:#fff !important;
    overflow:hidden !important;
    box-shadow:0 5px 16px rgba(16,24,40,.05) !important;
}

#modal-bookcourse .booking-details-summary-copy{
    padding:20px 22px !important;
}

#modal-bookcourse .booking-details-summary-copy:before{
    content:"Selected session";
    display:block;
    margin-bottom:7px;
    color:#667085;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

#modal-bookcourse .booking-details-summary-copy h2{
    margin:0 0 14px !important;
    color:#101828 !important;
    font-size:20px !important;
    line-height:1.25 !important;
}

#modal-bookcourse .booking-details-summary-copy h3{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 0 14px !important;
    padding:11px 13px !important;
    border:1px solid #d8e4f2 !important;
    border-radius:8px !important;
    background:#f4f8fd !important;
    color:#1d2939 !important;
    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
}

#modal-bookcourse .booking-details-summary-copy h3:before{
    content:"Session";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    padding:5px 7px;
    border-radius:5px;
    background:#155eef;
    color:#fff;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

#modal-bookcourse .booking-details-summary-copy p{
    display:flex !important;
    align-items:flex-start !important;
    gap:9px !important;
    margin:8px 0 0 !important;
    color:#475467 !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

#modal-bookcourse .booking-details-summary-copy p .fa{
    flex:0 0 16px;
    width:16px;
    margin-top:3px;
    color:#155eef !important;
    text-align:center;
}

@media(max-width:640px){
    #modal-bookcourse .booking-details-summary-copy{
        padding:17px !important;
    }

    #modal-bookcourse .booking-details-summary-copy h3{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:7px !important;
    }
}





/* =========================================================
   BOOKING DRAWER - NEW SELECTED SESSION LAYOUT
   ========================================================= */

#modal-bookcourse .booking-details-summary{
    margin:0 0 24px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:14px !important;
    background:#fff !important;
    overflow:hidden !important;
    box-shadow:0 8px 24px rgba(16,24,40,.07) !important;
}

#modal-bookcourse .booking-details-summary-copy{
    position:relative !important;
    padding:0 !important;
}

#modal-bookcourse .booking-details-summary-copy:before{
    content:"Booking details";
    display:block;
    padding:11px 18px;
    border-bottom:1px solid #e8edf2;
    background:#f8fafc;
    color:#667085;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

/* Course title */
#modal-bookcourse .booking-details-summary-copy h2{
    margin:0 !important;
    padding:18px 18px 6px !important;
    color:#101828 !important;
    font-size:21px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
    letter-spacing:-.01em !important;
}

/* Selected session title */
#modal-bookcourse .booking-details-summary-copy h3{
    position:relative !important;
    display:block !important;
    margin:14px 18px 0 !important;
    padding:18px 18px 18px 62px !important;
    border:1px solid #cfe0ff !important;
    border-radius:11px !important;
    background:#f5f9ff !important;
    color:#173b74 !important;
    font-size:17px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
    box-shadow:none !important;
}

/* Session icon */
#modal-bookcourse .booking-details-summary-copy h3:before{
    content:"\f073";
    font-family:FontAwesome;
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:9px;
    background:#155eef;
    color:#fff;
    font-size:14px;
}

/* Small label above the actual session name */
#modal-bookcourse .booking-details-summary-copy h3:after{
    content:"Selected session";
    position:absolute;
    left:62px;
    top:8px;
    color:#667085;
    font-size:9px;
    line-height:1;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

/* Metadata rows */
#modal-bookcourse .booking-details-summary-copy p{
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    align-items:start !important;
    gap:8px !important;
    margin:0 18px !important;
    padding:12px 0 !important;
    border-bottom:1px solid #eef2f6 !important;
    color:#344054 !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

#modal-bookcourse .booking-details-summary-copy p:first-of-type{
    margin-top:12px !important;
}

#modal-bookcourse .booking-details-summary-copy p:last-of-type{
    border-bottom:0 !important;
    padding-bottom:18px !important;
}

#modal-bookcourse .booking-details-summary-copy p .fa{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:28px !important;
    height:28px !important;
    margin:0 !important;
    border-radius:8px !important;
    background:#f2f4f7 !important;
    color:#475467 !important;
    font-size:12px !important;
}

/* Make date emphasis cleaner */
#modal-bookcourse .booking-details-summary-copy p b{
    color:#172033 !important;
    font-weight:800 !important;
}

@media(max-width:640px){
    #modal-bookcourse .booking-details-summary-copy h2{
        padding:16px 16px 6px !important;
        font-size:19px !important;
    }

    #modal-bookcourse .booking-details-summary-copy h3{
        margin:12px 16px 0 !important;
        padding:17px 14px 17px 58px !important;
        font-size:16px !important;
    }

    #modal-bookcourse .booking-details-summary-copy h3:after{
        left:58px;
    }

    #modal-bookcourse .booking-details-summary-copy p{
        margin:0 16px !important;
    }
}





/* =========================================================
   SELECTED SESSION IN STICKY MODAL HEADER
   ========================================================= */
#modal-bookcourse .event-header-session{
    margin-top:12px !important;
    padding:11px 13px !important;
    border:1px solid #d7e4f5 !important;
    border-radius:9px !important;
    background:#f6f9fe !important;
}

#modal-bookcourse .event-header-session-label{
    display:block !important;
    margin-bottom:4px !important;
    color:#667085 !important;
    font-size:9px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

#modal-bookcourse .event-header-session strong{
    display:block !important;
    color:#173b74 !important;
    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

#modal-bookcourse .event-header-session-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px 14px !important;
    margin-top:6px !important;
    color:#475467 !important;
    font-size:11px !important;
    line-height:1.35 !important;
}

#modal-bookcourse .event-header-session-meta span:empty{
    display:none !important;
}

#modal-bookcourse .event-header-session-meta span{
    position:relative !important;
}

#modal-bookcourse #event-header-session-location:not(:empty):before{
    content:"\f041";
    font-family:FontAwesome;
    margin-right:5px;
    color:#155eef;
}

#modal-bookcourse #event-header-session-dates:not(:empty):before{
    content:"\f073";
    font-family:FontAwesome;
    margin-right:5px;
    color:#155eef;
}

/* Once the session is shown in the sticky header, remove the duplicate body summary. */
#modal-bookcourse #replyfields .booking-details-summary{
    display:none !important;
}

@media(max-width:640px){
    #modal-bookcourse .event-header-session{
        margin-top:9px !important;
        padding:10px 11px !important;
    }

    #modal-bookcourse .event-header-session-meta{
        display:grid !important;
        gap:4px !important;
    }
}




/* Booking drawer header - image removed */
#modal-bookcourse .event-modal-header-actions{
    align-items:flex-start !important;
}

#modal-bookcourse .event-modal-thumb{
    display:none !important;
}




/* =========================================================
   RELATED TRAINING - SECTION PANEL
   ========================================================= */
#pagecontainer .event-related{
    margin-top:42px !important;
    padding:28px !important;
    box-sizing:border-box !important;
    border:1px solid #e1e7ee !important;
    border-radius:20px !important;
    background:#f7f9fc !important;
    box-shadow:0 10px 28px rgba(16,24,40,.05) !important;
}

#pagecontainer .event-related-heading{
    margin-bottom:22px !important;
    padding-bottom:18px !important;
    border-bottom:1px solid #e2e8f0 !important;
}

#pagecontainer .event-related-heading .event-kicker{
    margin-bottom:7px !important;
}

#pagecontainer .event-related-heading h2{
    margin:0 !important;
}

#pagecontainer .event-related-heading p{
    margin:8px 0 0 !important;
    max-width:620px !important;
    color:#667085 !important;
}

#pagecontainer .event-related-grid{
    gap:20px !important;
}

#pagecontainer .event-related-card{
    background:#fff !important;
    border-color:#dfe6ee !important;
    box-shadow:0 5px 16px rgba(16,24,40,.05) !important;
}

#pagecontainer .event-related-card:hover{
    transform:translateY(-3px) !important;
    box-shadow:0 14px 30px rgba(16,24,40,.10) !important;
}

@media(max-width:780px){
    #pagecontainer .event-related{
        margin-top:28px !important;
        padding:20px !important;
        border-radius:16px !important;
    }

    #pagecontainer .event-related-heading{
        margin-bottom:18px !important;
        padding-bottom:15px !important;
    }
}

@media(max-width:520px){
    #pagecontainer .event-related{
        padding:16px !important;
        border-radius:14px !important;
    }
}





/* =========================================================
   COMPACT EVENT HERO
   More space for course information, less for the image.
   ========================================================= */
#pagecontainer .event-hero{
    grid-template-columns:minmax(260px,35%) minmax(0,65%) !important;
    min-height:0 !important;
    align-items:stretch !important;
}

#pagecontainer .event-hero-media{
    min-height:0 !important;
    height:100% !important;
    max-height:390px !important;
    overflow:hidden !important;
}

#pagecontainer .event-hero-media img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:300px !important;
    max-height:390px !important;
    object-fit:cover !important;
    object-position:center !important;
}

#pagecontainer .event-hero-panel{
    padding:32px 34px !important;
    min-height:300px !important;
    box-sizing:border-box !important;
}

@media(max-width:900px){
    #pagecontainer .event-hero{
        grid-template-columns:minmax(220px,38%) minmax(0,62%) !important;
    }

    #pagecontainer .event-hero-panel{
        padding:26px 28px !important;
    }
}

@media(max-width:720px){
    #pagecontainer .event-hero{
        grid-template-columns:1fr !important;
    }

    #pagecontainer .event-hero-media{
        width:100% !important;
        height:190px !important;
        max-height:190px !important;
    }

    #pagecontainer .event-hero-media img{
        width:100% !important;
        height:190px !important;
        min-height:190px !important;
        max-height:190px !important;
        object-fit:cover !important;
    }

    #pagecontainer .event-hero-panel{
        min-height:0 !important;
        padding:24px 22px !important;
    }
}

@media(max-width:480px){
    #pagecontainer .event-hero-media,
    #pagecontainer .event-hero-media img{
        height:155px !important;
        min-height:155px !important;
        max-height:155px !important;
    }

    #pagecontainer .event-hero-panel{
        padding:21px 18px !important;
    }
}





/* =========================================================
   COMPACT HERO - FULL HEIGHT IMAGE FIX
   Keep the narrow image column but let the image fill the
   complete hero height.
   ========================================================= */
#pagecontainer .event-hero{
    align-items:stretch !important;
}

#pagecontainer .event-hero-media{
    display:flex !important;
    align-self:stretch !important;
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
}

#pagecontainer .event-hero-media img{
    flex:1 1 auto !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center !important;
}

@media(max-width:720px){
    #pagecontainer .event-hero-media{
        display:block !important;
        height:190px !important;
        max-height:190px !important;
    }

    #pagecontainer .event-hero-media img{
        width:100% !important;
        height:190px !important;
        min-height:190px !important;
        max-height:190px !important;
    }
}

@media(max-width:480px){
    #pagecontainer .event-hero-media{
        height:155px !important;
        max-height:155px !important;
    }

    #pagecontainer .event-hero-media img{
        height:155px !important;
        min-height:155px !important;
        max-height:155px !important;
    }
}





/* =========================================================
   TRAINING / EVENT NOT FOUND
   ========================================================= */
#pagecontainer .training-not-found{
    max-width:720px;
    margin:70px auto;
    padding:48px 42px;
    box-sizing:border-box;
    border:1px solid #e1e7ee;
    border-radius:20px;
    background:#fff;
    text-align:center;
    box-shadow:0 16px 40px rgba(16,24,40,.08);
}

#pagecontainer .training-not-found-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#fff1f1;
    color:#c92a2a;
    font-size:25px;
}

#pagecontainer .training-not-found h1{
    margin:0 0 12px;
    color:#172033;
    font-size:30px;
    line-height:1.2;
}

#pagecontainer .training-not-found p{
    max-width:560px;
    margin:0 auto 24px;
    color:#667085;
    font-size:15px;
    line-height:1.65;
}

#pagecontainer .training-not-found-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 16px;
    border-radius:8px;
    background:#155eef;
    color:#fff !important;
    font-size:13px;
    font-weight:800;
    text-decoration:none !important;
}

#pagecontainer .training-not-found-action:hover{
    background:#0f4fc9;
}

@media(max-width:640px){
    #pagecontainer .training-not-found{
        margin:35px auto;
        padding:34px 22px;
    }

    #pagecontainer .training-not-found h1{
        font-size:25px;
    }
}





/* Hero booking button when there are no available sessions */
#pagecontainer #bookingwindow .no-sessions-available{
    width:100% !important;
    min-height:54px !important;
    border:1px solid #d0d5dd !important;
    border-radius:13px !important;
    background:#f2f4f7 !important;
    color:#667085 !important;
    font-size:15px !important;
    font-weight:800 !important;
    cursor:not-allowed !important;
    box-shadow:none !important;
}





/* Draft mode notice */
#pagecontainer .draft-mode-notice{
    margin:18px 0 0 !important;
    padding:13px 15px !important;
    border:1px solid #fedf89 !important;
    border-radius:10px !important;
    background:#fffaeb !important;
    color:#93370d !important;
}

#pagecontainer .draft-mode-notice p{
    margin:0 !important;
    color:#93370d !important;
    font-size:13px !important;
    line-height:1.45 !important;
    font-weight:800 !important;
}



#pagecontainer .event-sessions-not-open{
    background:#f8fafc;
}

#pagecontainer .event-sessions-not-open .event-section-heading{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:0;
}

#pagecontainer .event-sessions-not-open .event-section-heading h2{
    font-size:23px;
}

/*
 * Critical booking-window sizing.
 * This is deliberately placed BEFORE #bookingwindow is rendered so the
 * browser never paints the opening/countdown/non-bookable state at the
 * wrong width and then resizes it when later page CSS arrives.
 */
@media(min-width:601px){
    #pagecontainer #bookingwindow{
        box-sizing:border-box !important;
    }

    #pagecontainer #bookingwindow.bookingwindow-bookable{
        display:inline-block !important;
        width:260px !important;
        min-width:260px !important;
        max-width:260px !important;
    }

    #pagecontainer #bookingwindow:not(.bookingwindow-bookable){
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    #pagecontainer #bookingwindow:not(.bookingwindow-bookable) #opening,
    #pagecontainer #bookingwindow:not(.bookingwindow-bookable) .booking-opening-panel,
    #pagecontainer #bookingwindow:not(.bookingwindow-bookable) #countdowntoopen{
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }
}

@media(max-width:600px){
    #pagecontainer #bookingwindow,
    #pagecontainer #bookingwindow.bookingwindow-bookable,
    #pagecontainer #bookingwindow:not(.bookingwindow-bookable){
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }
}

/*
 * Keep the disabled booking message on one line.
 * This is intentionally CSS-only; booking/opening/countdown logic is unchanged.
 */
@media(min-width:601px){
    #pagecontainer #bookingwindow.bookingwindow-bookable{
        width:auto !important;
        min-width:260px !important;
        max-width:none !important;
    }

    #pagecontainer #bookingwindow .no-sessions-available{
        display:inline-block !important;
        width:auto !important;
        min-width:220px !important;
        max-width:none !important;
        white-space:nowrap !important;
    }
}

#pagecontainer .main-session-card.session-temporarily-reserved{
    cursor:default !important;
    opacity:.78;
}
#pagecontainer .main-session-card.session-temporarily-reserved:hover{
    transform:none !important;
}

/* Unavailable session shown in the normal selected-session area */
#modal-bookcourse .booking-session-unavailable-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    width:100%;
    box-sizing:border-box;
    padding:18px;
    border:1px solid #f3b4b4;
    border-radius:12px;
    background:#fff5f5;
    color:#7a271a;
}

#modal-bookcourse .booking-session-unavailable-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fee4e2;
    color:#d92d20;
    font-size:21px;
}

#modal-bookcourse .booking-session-unavailable-copy{
    flex:1 1 auto;
    min-width:0;
}

#modal-bookcourse .booking-session-unavailable-kicker{
    display:block;
    margin-bottom:4px;
    color:#b42318;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#modal-bookcourse .booking-session-unavailable-card h3{
    margin:0 0 7px !important;
    padding:0 !important;
    color:#912018 !important;
    font-size:19px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
    background:transparent !important;
}

#modal-bookcourse .booking-session-unavailable-card p{
    margin:0 0 12px !important;
    color:#7a271a !important;
    font-size:13px !important;
    line-height:1.5 !important;
}

#modal-bookcourse .booking-session-unavailable-disabled{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    background:#fee4e2;
    color:#b42318;
    font-size:11px;
    font-weight:850;
}

#modal-bookcourse .booking-session-unavailable-actions{
    margin-top:14px;
}

#modal-bookcourse .booking-session-unavailable-actions a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#155eef;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
}

#modal-bookcourse .booking-session-unavailable-actions a:hover{
    text-decoration:underline;
}

@media(max-width:520px){
    #modal-bookcourse .booking-session-unavailable-card{
        padding:15px;
        gap:11px;
    }
    #modal-bookcourse .booking-session-unavailable-icon{
        flex-basis:36px;
        width:36px;
        height:36px;
        font-size:18px;
    }
}

#modal-bookcourse .booking-already-in-progress-card{
    display:flex;
    align-items:flex-start;
    gap:14px;
    width:100%;
    box-sizing:border-box;
    padding:18px;
    border:1px solid #fedf89;
    border-radius:12px;
    background:#fffaeb;
    color:#7a2e0e;
}
#modal-bookcourse .booking-already-in-progress-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fef0c7;
    color:#dc6803;
    font-size:21px;
}
#modal-bookcourse .booking-already-in-progress-copy{
    flex:1 1 auto;
    min-width:0;
}
#modal-bookcourse .booking-already-in-progress-kicker{
    display:block;
    margin-bottom:4px;
    color:#b54708;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
#modal-bookcourse .booking-already-in-progress-card h3{
    margin:0 0 7px !important;
    padding:0 !important;
    color:#93370d !important;
    font-size:19px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
    background:transparent !important;
}
#modal-bookcourse .booking-already-in-progress-card p{
    margin:0 0 12px !important;
    color:#7a2e0e !important;
    font-size:13px !important;
    line-height:1.5 !important;
}
#modal-bookcourse .booking-already-in-progress-disabled{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    background:#fef0c7;
    color:#b54708;
    font-size:11px;
    font-weight:850;
}

/* Main-page temporary reservation: status pill above disabled action */
#pagecontainer .main-session-card.session-temporarily-reserved .event-session-availability{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:10px !important;
}

#pagecontainer .main-session-card.session-temporarily-reserved .event-session-availability > .bgorange{
    display:inline-flex !important;
    align-self:flex-end !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 !important;
}


@media(max-width:780px){
    #pagecontainer .main-session-card.session-temporarily-reserved .event-session-availability > .bgorange{
        align-self:flex-start !important;
    }
}

/* Sessions remain visible outside the overall booking window, but are disabled. */
#pagecontainer .main-session-card.session-booking-window-disabled{
    cursor:default !important;
}

#pagecontainer .main-session-card.session-booking-window-disabled:hover{
    transform:none !important;
}

#pagecontainer .session-window-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:11px;
    line-height:1.2;
    font-weight:850;
    white-space:nowrap;
}

#pagecontainer .session-window-notopen{
    background:#fef0c7;
    color:#b54708;
}

#pagecontainer .session-window-closed{
    background:#eaecf0;
    color:#475467;
}

#pagecontainer .booking-waiting-disabled{
    opacity:.55;
    cursor:not-allowed !important;
    pointer-events:none;
}

#modal-bookcourse .booking-time-expired{
    display:flex;
    align-items:flex-start;
    gap:14px;
    width:100%;
    box-sizing:border-box;
    padding:18px;
    border:1px solid #fedf89;
    border-radius:12px;
    background:#fffaeb;
}
#modal-bookcourse .booking-time-expired-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fef0c7;
    color:#dc6803;
    font-size:21px;
}
#modal-bookcourse .booking-time-expired-copy{
    flex:1 1 auto;
    min-width:0;
}
#modal-bookcourse .booking-time-expired-kicker{
    display:block;
    margin-bottom:4px;
    color:#b54708;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
#modal-bookcourse .booking-time-expired h2{
    margin:0 0 7px !important;
    padding:0 !important;
    background:transparent !important;
    color:#93370d !important;
    font-size:19px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}
#modal-bookcourse .booking-time-expired p{
    margin:0 0 10px !important;
    color:#7a2e0e !important;
    font-size:13px !important;
    line-height:1.5 !important;
}
#modal-bookcourse .booking-restart-btn{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:4px;
    padding:9px 13px;
    border-radius:8px;
    background:#dc6803;
    color:#fff !important;
    font-size:12px;
    font-weight:800;
    text-decoration:none !important;
}
#modal-bookcourse .booking-restart-btn:hover{
    background:#b54708;
    color:#fff !important;
}
@media(max-width:520px){
    #modal-bookcourse .booking-time-expired{
        padding:15px;
        gap:11px;
    }
    #modal-bookcourse .booking-time-expired-icon{
        flex-basis:36px;
        width:36px;
        height:36px;
        font-size:18px;
    }
}

#pagecontainer .booking-opening-panel{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin:16px 0;
    padding:20px;
    border:1px solid #bfd4ff;
    border-radius:14px;
    background:#f5f8ff;
    box-sizing:border-box;
}

#pagecontainer .booking-opening-icon{
    flex:0 0 46px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#dbe7ff;
    color:#155eef;
    font-size:22px;
}

#pagecontainer .booking-opening-copy{
    flex:1 1 auto;
    min-width:0;
}

#pagecontainer .booking-opening-kicker{
    display:block;
    margin-bottom:4px;
    color:#155eef;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#pagecontainer .booking-opening-copy h3{
    margin:0 0 9px !important;
    padding:0 !important;
    background:transparent !important;
    color:#102a56 !important;
    font-size:21px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}

#pagecontainer .booking-opening-date{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0 0 8px !important;
    color:#344054;
    font-size:13px;
}

#pagecontainer .booking-opening-date i{
    color:#155eef;
}

#pagecontainer .booking-opening-note{
    margin:0 0 15px !important;
    color:#475467;
    font-size:13px;
    line-height:1.5;
}

#pagecontainer .booking-opening-countdown{
    display:grid;
    grid-template-columns:repeat(4,minmax(68px,1fr));
    gap:8px;
    max-width:430px;
    color:#101828 !important;
}

#pagecontainer .booking-countdown-unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:64px;
    padding:9px 7px;
    border:1px solid #d0d9ea;
    border-radius:10px;
    background:#fff;
    box-sizing:border-box;
}

#pagecontainer .booking-countdown-unit strong{
    display:block;
    color:#155eef;
    font-size:22px;
    line-height:1;
    font-weight:900;
}

#pagecontainer .booking-countdown-unit span{
    display:block;
    margin-top:5px;
    color:#667085;
    font-size:9px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

@media(max-width:520px){
    #pagecontainer .booking-opening-panel{
        padding:15px;
        gap:11px;
    }

    #pagecontainer .booking-opening-icon{
        flex-basis:38px;
        width:38px;
        height:38px;
        font-size:18px;
    }

    #pagecontainer .booking-opening-countdown{
        grid-template-columns:repeat(2,minmax(80px,1fr));
    }
}

#pagecontainer .booking-opening-countdown.booking-opening-countdown-long{
    grid-template-columns:repeat(2,minmax(100px,150px));
    max-width:310px;
}

/* =========================================================
   CLEAN BOOKING CONFIRMATION
   ========================================================= */
#modal-bookcourse .booking-result-success{
    display:block !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid #a6e4c5 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 10px 28px rgba(16,24,40,.08) !important;
}

#modal-bookcourse .booking-success-confirmation{
    width:100%;
}

#modal-bookcourse .booking-success-top{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 20px;
    background:#f0fdf4;
    border-bottom:1px solid #d1fadf;
}

#modal-bookcourse .booking-success-check{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#12b76a;
    color:#fff;
    font-size:20px;
    box-shadow:0 5px 12px rgba(18,183,106,.22);
}

#modal-bookcourse .booking-success-heading{
    flex:1 1 auto;
    min-width:0;
}

#modal-bookcourse .booking-success-kicker{
    display:block;
    margin-bottom:3px;
    color:#027a48;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#modal-bookcourse .booking-success-heading h2{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    color:#123524 !important;
    font-size:21px !important;
    line-height:1.25 !important;
    font-weight:850 !important;
}

#modal-bookcourse .booking-success-reference{
    margin-top:5px;
    color:#475467;
    font-size:12px;
}

#modal-bookcourse .booking-success-reference strong{
    color:#027a48;
    font-size:13px;
}

#modal-bookcourse .booking-success-main{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    padding:20px;
}

#modal-bookcourse .booking-success-main-with-image{
    grid-template-columns:minmax(0,1fr) 150px;
}

#modal-bookcourse .booking-success-details{
    min-width:0;
}

#modal-bookcourse .booking-success-block{
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:1px solid #eaecf0;
}

#modal-bookcourse .booking-success-label{
    display:block;
    margin-bottom:5px;
    color:#667085;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

#modal-bookcourse .booking-success-course-title{
    display:block;
    color:#172033;
    font-size:18px;
    line-height:1.35;
    font-weight:850;
}

#modal-bookcourse .booking-success-session{
    display:block;
    margin-top:6px;
    color:#155eef;
    font-size:13px;
    line-height:1.4;
    font-weight:750;
}

#modal-bookcourse .booking-success-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

#modal-bookcourse .booking-success-meta-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px;
    border:1px solid #e4e7ec;
    border-radius:10px;
    background:#f8fafc;
}

#modal-bookcourse .booking-success-meta-item > i{
    margin-top:2px;
    color:#155eef;
    font-size:15px;
}

#modal-bookcourse .booking-success-meta-item div{
    min-width:0;
}

#modal-bookcourse .booking-success-meta-item span{
    display:block;
    margin-bottom:3px;
    color:#667085;
    font-size:9px;
    font-weight:850;
    letter-spacing:.05em;
    text-transform:uppercase;
}

#modal-bookcourse .booking-success-meta-item strong{
    display:block;
    overflow-wrap:anywhere;
    color:#344054;
    font-size:12px;
    line-height:1.4;
    font-weight:750;
}

#modal-bookcourse .booking-success-email-note{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin-top:12px;
    padding:10px 12px;
    border-radius:9px;
    background:#fffaeb;
    color:#7a2e0e;
    font-size:11px;
    line-height:1.45;
}

#modal-bookcourse .booking-success-email-note i{
    margin-top:2px;
    color:#dc6803;
}

#modal-bookcourse .booking-success-image{
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

#modal-bookcourse .booking-success-image img{
    display:block;
    width:100%;
    max-width:150px;
    max-height:140px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid #e4e7ec;
    background:#fff;
}

#modal-bookcourse .booking-success-actions{
    display:flex;
    justify-content:flex-end;
    padding:14px 20px 18px;
    border-top:1px solid #eaecf0;
    background:#fcfcfd;
}

#modal-bookcourse .booking-success-actions .bookagain{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    margin:0 !important;
    padding:9px 14px !important;
    border:1px solid #cfd7e3 !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#344054 !important;
    font-size:12px !important;
    font-weight:800 !important;
}

#modal-bookcourse .booking-success-actions .bookagain:hover{
    border-color:#155eef !important;
    color:#155eef !important;
}

@media(max-width:620px){
    #modal-bookcourse .booking-success-main-with-image{
        grid-template-columns:1fr;
    }

    #modal-bookcourse .booking-success-image{
        justify-content:flex-start;
    }

    #modal-bookcourse .booking-success-image img{
        max-width:120px;
    }

    #modal-bookcourse .booking-success-meta{
        grid-template-columns:1fr;
    }

    #modal-bookcourse .booking-success-actions{
        justify-content:stretch;
    }

    #modal-bookcourse .booking-success-actions .bookagain{
        width:100% !important;
    }
}

/* Booking confirmation content should use the full available drawer width. */
#modal-bookcourse .booking-success-main{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
}

#modal-bookcourse .booking-success-main-with-image{
    display:block !important;
    width:100% !important;
}

#modal-bookcourse .booking-success-details{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

#modal-bookcourse .booking-success-block,
#modal-bookcourse .booking-success-meta,
#modal-bookcourse .booking-success-email-note{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
}

/* Keep the supporting image separate so it cannot reduce the details width. */
#modal-bookcourse .booking-success-image{
    justify-content:flex-start !important;
    margin-top:16px;
}

/* =========================================================
   RELEASE RESERVED PLACE CONFIRMATION
   ========================================================= */
.booking-release-confirm{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    box-sizing:border-box;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
}

.booking-release-confirm.show{
    opacity:1;
    visibility:visible;
}

.booking-release-confirm-backdrop{
    position:absolute;
    inset:0;
    background:rgba(16,24,40,.52);
    backdrop-filter:blur(2px);
}

.booking-release-confirm-panel{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    gap:14px;
    width:min(100%,520px);
    padding:20px;
    border:1px solid #fedf89;
    border-radius:14px;
    background:#fff;
    box-shadow:0 20px 45px rgba(16,24,40,.22);
    box-sizing:border-box;
    transform:translateY(8px) scale(.985);
    transition:transform .18s ease;
}

.booking-release-confirm.show .booking-release-confirm-panel{
    transform:translateY(0) scale(1);
}

.booking-release-confirm-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fef0c7;
    color:#dc6803;
    font-size:19px;
}

.booking-release-confirm-copy{
    flex:1 1 auto;
    min-width:0;
}

.booking-release-confirm-kicker{
    display:block;
    margin-bottom:4px;
    color:#b54708;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.booking-release-confirm h2{
    margin:0 0 8px !important;
    padding:0 !important;
    background:transparent !important;
    color:#7a2e0e !important;
    font-size:20px !important;
    line-height:1.3 !important;
    font-weight:850 !important;
}

.booking-release-confirm p{
    margin:0 !important;
    color:#475467 !important;
    font-size:13px !important;
    line-height:1.55 !important;
}

.booking-release-confirm-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:8px;
    margin-top:17px;
}

.booking-release-confirm-actions .btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    margin:0 !important;
    padding:9px 13px !important;
    border-radius:8px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    box-shadow:none !important;
}

.booking-release-keep{
    border:1px solid #155eef !important;
    background:#155eef !important;
    color:#fff !important;
}

.booking-release-keep:hover,
.booking-release-keep:focus{
    background:#004eeb !important;
    color:#fff !important;
}

.booking-release-confirm-close{
    border:1px solid #f04438 !important;
    background:#fff !important;
    color:#b42318 !important;
}

.booking-release-confirm-close:hover,
.booking-release-confirm-close:focus{
    background:#fef3f2 !important;
    color:#b42318 !important;
}

@media(max-width:560px){
    .booking-release-confirm{
        padding:14px;
    }

    .booking-release-confirm-panel{
        gap:11px;
        padding:16px;
    }

    .booking-release-confirm-icon{
        flex-basis:38px;
        width:38px;
        height:38px;
        font-size:17px;
    }

    .booking-release-confirm-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .booking-release-confirm-actions .btn{
        width:100% !important;
    }
}

/* Waiting-list close confirmation is informational, not a held-place warning. */
.booking-release-confirm-waiting .booking-release-confirm-panel{
    border-color:#b2ccff;
}
.booking-release-confirm-waiting .booking-release-confirm-icon{
    background:#eff4ff;
    color:#155eef;
}
.booking-release-confirm-waiting .booking-release-confirm-kicker{
    color:#155eef;
}
.booking-release-confirm-waiting .booking-release-confirm h2,
.booking-release-confirm-waiting h2{
    color:#102a56 !important;
}

#pagecontainer .main-session-card.session-access-locked{
    cursor:not-allowed !important;
}

#pagecontainer .main-session-card.session-access-locked:hover{
    transform:none !important;
}

#pagecontainer .session-access-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#f2f4f7;
    color:#475467;
}

#pagecontainer .session-access-status i{
    font-size:11px;
}

/* Keep availability clearly visible on access-code protected sessions. */
#pagecontainer .session-access-availability{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:7px !important;
}

#pagecontainer .session-access-availability .availability-badge,
#pagecontainer .session-access-availability .session-access-status{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
}

@media(max-width:780px){
    #pagecontainer .session-access-availability{
        align-items:flex-start !important;
    }
}

/* ACCESS CODE — FIRST STEP OF BOOKING */
#pagecontainer #redaccessbox.booking-access-step{
    width:100%;margin:20px 0!important;padding:0!important;border:0!important;
    border-radius:0!important;background:transparent!important;box-sizing:border-box;
}
#pagecontainer .booking-access-card{
    display:flex;align-items:flex-start;gap:16px;width:100%;padding:22px;
    border:1px solid #d0d5dd;border-radius:14px;background:#fff;
    box-shadow:0 5px 18px rgba(16,24,40,.06);box-sizing:border-box;
}
#pagecontainer .booking-access-icon{
    flex:0 0 46px;width:46px;height:46px;display:flex;align-items:center;
    justify-content:center;border-radius:12px;background:#eff4ff;color:#155eef;font-size:19px;
}
#pagecontainer .booking-access-content{flex:1 1 auto;min-width:0;}
#pagecontainer .booking-access-kicker{
    display:block;margin-bottom:5px;color:#155eef;font-size:10px;line-height:1.2;
    font-weight:900;letter-spacing:.09em;text-transform:uppercase;
}
#pagecontainer .booking-access-content h2{
    margin:0 0 7px!important;padding:0!important;background:transparent!important;
    color:#172033!important;font-size:23px!important;line-height:1.25!important;
}
#pagecontainer .booking-access-intro{
    max-width:650px;margin:0 0 17px!important;color:#667085;font-size:14px;line-height:1.55;
}
#pagecontainer .booking-access-form{max-width:650px;margin:0;}
#pagecontainer .booking-access-form label{
    display:block;margin:0 0 7px;color:#344054;font-size:13px;font-weight:800;
}
#pagecontainer .booking-access-entry{display:flex;align-items:stretch;gap:9px;}
#pagecontainer .booking-access-entry #accesscode{
    flex:1 1 auto;min-width:0;height:44px;margin:0!important;padding:10px 12px!important;
    border:1px solid #98a2b3!important;border-radius:8px!important;background:#fff!important;
    color:#172033!important;font-size:14px!important;text-transform:none!important;box-shadow:none!important;
}
#pagecontainer .booking-access-entry #accesscode:focus{
    border-color:#155eef!important;outline:3px solid rgba(21,94,239,.13)!important;outline-offset:0;
}
#pagecontainer .booking-access-submit{
    flex:0 0 auto;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
    min-width:125px;min-height:44px;margin:0!important;padding:10px 17px!important;
    border:1px solid #155eef!important;border-radius:8px!important;background:#155eef!important;
    color:#fff!important;font-size:13px!important;font-weight:850!important;
}
#pagecontainer .booking-access-submit:hover,#pagecontainer .booking-access-submit:focus{
    background:#004eeb!important;color:#fff!important;
}
#pagecontainer .booking-access-help{
    display:flex;align-items:flex-start;gap:9px;max-width:650px;margin-top:17px;padding-top:15px;
    border-top:1px solid #eaecf0;color:#667085;font-size:12px;line-height:1.5;
}
#pagecontainer .booking-access-help>i{margin-top:2px;color:#667085;}
#pagecontainer .booking-access-help strong,#pagecontainer .booking-access-help span{display:block;}
#pagecontainer .booking-access-help strong{margin-bottom:2px;color:#344054;}
#pagecontainer .booking-access-help a{overflow-wrap:anywhere;font-weight:700;}
body.booking-access-locked #bookingwindow{display:none!important;}
.booking-access-needed{
    margin:0 0 13px;padding:10px 12px;border:1px solid #fecdca;border-radius:8px;
    background:#fef3f2;color:#b42318;font-size:13px;line-height:1.45;
}
@media(max-width:600px){
    #pagecontainer .booking-access-card{gap:12px;padding:17px;}
    #pagecontainer .booking-access-icon{flex-basis:40px;width:40px;height:40px;font-size:17px;}
    #pagecontainer .booking-access-content h2{font-size:20px!important;}
    #pagecontainer .booking-access-entry{flex-direction:column;}
    #pagecontainer .booking-access-submit{width:100%!important;}
}

/* Contact/help now lives with the Training/Event Details. */
#pagecontainer .event-contact-help{
    padding-bottom:0;
}

#pagecontainer .event-contact-email{
    display:flex;
    align-items:flex-start;
    gap:8px;
    width:100%;
    margin:0;
    color:#155eef;
    text-decoration:none;
    overflow-wrap:anywhere;
}

#pagecontainer .event-contact-email i{
    flex:0 0 auto;
    margin-top:3px;
    color:#667085;
}

#pagecontainer .event-contact-email strong{
    color:#155eef;
    font-size:13px;
    line-height:1.45;
}

#pagecontainer .event-contact-email:hover strong,
#pagecontainer .event-contact-email:focus strong{
    text-decoration:underline;
}

#pagecontainer .event-contact-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    margin:12px 0 0;
    padding:10px 12px;
    border:1px solid #e4e7ec;
    border-radius:9px;
    background:#f8fafc;
    color:#344054;
    font:inherit;
    font-size:12px;
    font-weight:800;
    text-align:left;
    cursor:pointer;
}

#pagecontainer .event-contact-toggle:hover,
#pagecontainer .event-contact-toggle:focus{
    border-color:#b2ccff;
    background:#f5f8ff;
    color:#155eef;
}

#pagecontainer .event-contact-toggle i{
    flex:0 0 auto;
    transition:transform .2s ease;
}

#pagecontainer .event-contact-toggle[aria-expanded="true"] i{
    transform:rotate(180deg);
}

#pagecontainer .event-contact-more{
    margin-top:10px;
    padding:12px;
    border:1px solid #e4e7ec;
    border-radius:9px;
    background:#fff;
    color:#475467;
    font-size:12px;
    line-height:1.55;
}

#pagecontainer .event-contact-more p:first-child{
    margin-top:0;
}

#pagecontainer .event-contact-more p:last-child{
    margin-bottom:0;
}

#pagecontainer .booking-access-response:empty{
    display:none;
}

#pagecontainer .booking-access-error{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 0 14px;
    padding:12px 13px;
    border:1px solid #fecdca;
    border-radius:9px;
    background:#fef3f2;
    color:#7a271a;
    box-sizing:border-box;
}

#pagecontainer .booking-access-error-icon{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fee4e2;
    color:#d92d20;
    font-size:14px;
}

#pagecontainer .booking-access-error-copy{
    flex:1 1 auto;
    min-width:0;
}

#pagecontainer .booking-access-error-copy strong{
    display:block;
    margin-bottom:3px;
    color:#912018;
    font-size:13px;
    line-height:1.35;
    font-weight:850;
}

#pagecontainer .booking-access-error-copy span{
    display:block;
    color:#7a271a;
    font-size:12px;
    line-height:1.5;
}

/* Keep duplicate-booking actions together and visually aligned. */
#modal-bookcourse .booking-result-actions{
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
}

#modal-bookcourse .booking-result-actions .booking-change-attendee,
#modal-bookcourse .booking-result-actions .booking-result-close{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-height:44px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    line-height:1.2 !important;
}

@media(max-width:520px){
    #modal-bookcourse .booking-result-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    #modal-bookcourse .booking-result-actions .booking-change-attendee,
    #modal-bookcourse .booking-result-actions .booking-result-close{
        width:100% !important;
        margin:0 !important;
    }
}

/* =========================================================
   BOOKING COMPLETE — FINAL DRAWER STATE
   ========================================================= */
#modal-bookcourse.booking-complete-state .event-modal-header,
#modal-bookcourse.booking-complete-state #clockdiv,
#modal-bookcourse.booking-complete-state #bookinginfodetails,
#modal-bookcourse.booking-complete-state #placestatus,
#modal-bookcourse.booking-complete-state #waitinglistdetails,
#modal-bookcourse.booking-complete-state #event-drawer-empty,
#modal-bookcourse.booking-complete-state #event-booking-notice{
    display:none !important;
}

#modal-bookcourse.booking-complete-state .event-booking-drawer{
    padding-top:0 !important;
}

#modal-bookcourse.booking-complete-state #courseinfoall{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

#modal-bookcourse.booking-complete-state #replyfields{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

#modal-bookcourse.booking-complete-state #bookcourse_complete{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

#modal-bookcourse.booking-complete-state .booking-fields,
#modal-bookcourse.booking-complete-state .booking-footer{
    display:none !important;
}

#modal-bookcourse.booking-complete-state #booking-result-card{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:22px 0 0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

#modal-bookcourse.booking-complete-state .booking-success-confirmation{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

#modal-bookcourse.booking-complete-state .booking-success-actions{
    margin-bottom:0 !important;
}

@media(max-width:600px){
    #modal-bookcourse.booking-complete-state .event-booking-drawer{
        padding:0 !important;
    }
}

/* Booking form validation messages */
#modal-bookcourse #notificationarea:empty{
    display:none;
}

#modal-bookcourse #notificationarea{
    width:100%;
    margin:0 0 14px !important;
    box-sizing:border-box;
}

#modal-bookcourse .booking-validation-alert{
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
    padding:12px 13px;
    border:1px solid #fecdca;
    border-radius:9px;
    background:#fef3f2;
    box-sizing:border-box;
}

#modal-bookcourse .booking-validation-alert-icon{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fee4e2;
    color:#d92d20;
    font-size:14px;
}

#modal-bookcourse .booking-validation-alert-copy{
    flex:1 1 auto;
    min-width:0;
}

#modal-bookcourse .booking-validation-alert-copy strong{
    display:block;
    margin:0 0 3px;
    color:#912018;
    font-size:13px;
    line-height:1.35;
    font-weight:850;
}

#modal-bookcourse .booking-validation-alert-copy span{
    display:block;
    color:#7a271a;
    font-size:12px;
    line-height:1.5;
}

#modal-bookcourse .waiting-list-success-confirmation .booking-success-check{
    background:#eff4ff !important;
    color:#155eef !important;
}

#modal-bookcourse .waiting-list-success-confirmation .booking-success-kicker{
    color:#155eef !important;
}

#modal-bookcourse .waiting-list-success-intro{
    margin:7px 0 0 !important;
    max-width:620px;
    color:#475467 !important;
    font-size:14px !important;
    line-height:1.55 !important;
}

#modal-bookcourse .waiting-list-success-note{
    border-color:#b2ccff !important;
    background:#f5f8ff !important;
    color:#344054 !important;
}

/* Waiting-list form structure and final-state cleanup */
#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-booking-fields{
    width:100% !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-booking-footer{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin-top:20px !important;
    padding-top:18px !important;
    border-top:1px solid #e5e7eb !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-terms{
    flex:1 1 auto;
    color:#667085;
    font-size:12px;
    line-height:1.5;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-terms p{
    margin:0 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-submit{
    flex:0 0 auto;
    min-width:170px;
}

#modal-bookcourse.booking-complete-state #bookcourse_complete > *:not(#booking-result-card){
    display:none !important;
}

#modal-bookcourse.booking-complete-state #booking-result-card{
    display:block !important;
}

@media(max-width:600px){
    #modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-booking-footer{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    #modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-submit{
        width:100% !important;
    }
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-booking-footer{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin-top:8px !important;
    padding-top:22px !important;
    border-top:1px solid #e5eaf0 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-terms{
    flex:1 1 auto;
    color:#667085;
    font-size:12px;
    line-height:1.55;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-terms p{
    margin:0 !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-submit{
    flex:0 0 auto;
    min-width:170px;
    min-height:48px;
}

#modal-bookcourse.booking-complete-state #bookcourse_complete > *:not(#booking-result-card){
    display:none !important;
}

@media(max-width:600px){
    #modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-booking-footer{
        flex-direction:column !important;
        align-items:stretch !important;
    }

    #modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-submit{
        width:100% !important;
    }
}

/* Waiting-list identity */
#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-banner{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:100%;
    margin:0 0 24px;
    padding:14px 15px;
    border:1px solid #b2ccff;
    border-radius:10px;
    background:#f5f8ff;
    box-sizing:border-box;
}
#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-banner-icon{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#e0eaff;
    color:#155eef;
    font-size:16px;
}
#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-banner-copy{
    flex:1 1 auto;
    min-width:0;
}
#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-banner-kicker{
    display:block;
    margin:0 0 3px;
    color:#155eef;
    font-size:10px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}
#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-banner-copy strong{
    display:block;
    margin:0 0 3px;
    color:#172033;
    font-size:14px;
    line-height:1.35;
    font-weight:850;
}
#modal-bookcourse #replyfields.waiting-list-form-stage .waiting-list-banner-copy span:last-child{
    display:block;
    color:#475467;
    font-size:12px;
    line-height:1.5;
}

/* Required badge: one clean pill only */
#modal-bookcourse #replyfields.waiting-list-form-stage .field-label-row .field-required{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    margin:0 0 0 auto !important;
}

/* Waiting-list form: one Required badge and the same select treatment as normal booking. */
#modal-bookcourse #replyfields.waiting-list-form-stage .field-wrapper label.textlabel:after{
    content:none !important;
    display:none !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage .field-label-row .field-required{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 auto !important;
    margin-left:auto !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage select.text-field-input,
#modal-bookcourse #replyfields.waiting-list-form-stage .booking-details-form select{
    -webkit-appearance:auto !important;
    -moz-appearance:auto !important;
    appearance:auto !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    padding:0 14px !important;
    padding-right:14px !important;
    line-height:normal !important;
    text-indent:0 !important;
    background-color:#fff !important;
    background-image:none !important;
    vertical-align:middle !important;
    cursor:pointer !important;
}

#modal-bookcourse #replyfields.waiting-list-form-stage select.text-field-input:focus,
#modal-bookcourse #replyfields.waiting-list-form-stage .booking-details-form select:focus{
    background-color:#fff !important;
    background-image:none !important;
}

/* =========================================================
   MAIN BOOK BUTTON — FINAL RESPONSIVE SIZE
   This is the large #bookplace button in the hero/booking area.
   ========================================================= */
#pagecontainer #bookingwindow{
    text-align:left !important;
}

#pagecontainer #bookplace{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:220px !important;
    max-width:260px !important;
    min-height:50px !important;
    margin:0 !important;
    padding:12px 26px !important;
    box-sizing:border-box !important;
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
}

@media(max-width:600px){
    #pagecontainer #bookingwindow{
        width:100% !important;
    }

    #pagecontainer #bookplace{
        display:flex !important;
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        min-height:54px !important;
        padding:14px 20px !important;
        margin:0 !important;
        font-size:16px !important;
    }
}

/* =========================================================
   BOOKING WINDOW WIDTH BY STATE
   Only the simple Book-button state is compact on desktop.
   Opening soon / closed / countdown / access-code states stay full width.
   ========================================================= */
@media(min-width:601px){
    #pagecontainer #bookingwindow.bookingwindow-bookable{
        display:inline-block !important;
        width:260px !important;
        min-width:260px !important;
        max-width:260px !important;
        box-sizing:border-box !important;
    }

    #pagecontainer #bookingwindow.bookingwindow-bookable p{
        width:100% !important;
    }

    #pagecontainer #bookingwindow.bookingwindow-bookable #bookplace{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }

    #pagecontainer #bookingwindow:not(.bookingwindow-bookable){
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }

    #pagecontainer #bookingwindow:not(.bookingwindow-bookable) #opening,
    #pagecontainer #bookingwindow:not(.bookingwindow-bookable) .booking-opening-panel{
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }
}

@media(max-width:600px){
    #pagecontainer #bookingwindow{
        display:block !important;
        width:100% !important;
        max-width:none !important;
        box-sizing:border-box !important;
    }
}

body.booking-access-locked #bookingwindow{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
}

/* DENI Number uses the same label colour as every other modern booking field. */
#modal-bookcourse .field-label-row label[for="app_de_number"],
#modal-bookcourse .field-label-row label[data-labelname="app_de_number"]{
    color:#344054 !important;
}

#modal-bookcourse .field-label-row label[for="app_de_number"]:focus,
#modal-bookcourse .field-label-row:focus-within label[for="app_de_number"],
#modal-bookcourse .field-wrapper.focused label[for="app_de_number"],
#modal-bookcourse .field-label-row:focus-within label[data-labelname="app_de_number"],
#modal-bookcourse .field-wrapper.focused label[data-labelname="app_de_number"]{
    color:#344054 !important;
}
/* =========================================================
   FINAL DRAWER MOTION OVERRIDE
   One source of truth for both opening and closing.
   ========================================================= */

#modal-bookcourse{
    opacity:0 !important;
    transition:opacity .24s ease !important;
    animation:none !important;
}

#modal-bookcourse .event-booking-drawer{
    transform:translateX(105%) !important;
    opacity:.35 !important;
    transition:
        transform .36s cubic-bezier(.22,.61,.36,1),
        opacity .24s ease !important;
    animation:none !important;
    will-change:transform,opacity;
}

#modal-bookcourse.drawer-open{
    opacity:1 !important;
}

#modal-bookcourse.drawer-open .event-booking-drawer{
    transform:translateX(0) !important;
    opacity:1 !important;
}

#modal-bookcourse.drawer-closing{
    opacity:0 !important;
}

#modal-bookcourse.drawer-closing .event-booking-drawer{
    transform:translateX(105%) !important;
    opacity:.35 !important;
}





/* =========================================================
   CLICKABLE AVAILABLE SESSION CARDS
   ========================================================= */
#pagecontainer .bookable-session-card{
    cursor:pointer;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease,
        background .16s ease;
}

#pagecontainer .bookable-session-card:hover,
#pagecontainer .bookable-session-card:focus{
    outline:0;
    border-color:#b7c9e5;
    box-shadow:0 10px 24px rgba(16,24,40,.08);
    transform:translateY(-1px);
}

#pagecontainer .bookable-session-card:focus-visible{
    box-shadow:
        0 0 0 3px rgba(21,94,239,.12),
        0 10px 24px rgba(16,24,40,.08);
}

#pagecontainer .bookable-session-card .event-session-title:after{
    content:"Click to book";
    display:inline-block;
    margin-left:10px;
    color:#155eef;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}





/* =========================================================
   CLICKABLE SESSION CARD - STRONGER AFFORDANCE
   ========================================================= */

#pagecontainer .bookable-session-card,
#pagecontainer .bookable-session-card *{
    cursor:pointer !important;
}

#pagecontainer .bookable-session-card{
    position:relative;
}

#pagecontainer .bookable-session-card:hover{
    border-color:#9db7d8 !important;
    background:#fbfdff !important;
    box-shadow:0 12px 28px rgba(16,24,40,.10) !important;
    transform:translateY(-2px) !important;
}

#pagecontainer .bookable-session-card .event-session-title:after{
    content:none !important;
}

#pagecontainer .bookable-session-card .event-session-availability{
    position:relative;
    padding-right:54px !important;
}

#pagecontainer .bookable-session-card .event-session-availability:after{
    content:"\f061";
    font-family:FontAwesome;
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:#edf4ff;
    color:#155eef;
    font-size:13px;
    transition:transform .16s ease,background .16s ease;
}

#pagecontainer .bookable-session-card:hover .event-session-availability:after{
    transform:translate(3px,-50%);
    background:#dbeafe;
}

#pagecontainer .bookable-session-card .event-session-info:after{
    content:"Book this session";
    display:block;
    margin-top:10px;
    color:#155eef;
    font-size:11px;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}

@media(max-width:780px){
    #pagecontainer .bookable-session-card .event-session-availability{
        padding-right:58px !important;
    }
}





/* =========================================================
   AVAILABLE SESSION - EXPLICIT BOOK ACTION
   ========================================================= */
#pagecontainer .bookable-session-card{
    cursor:pointer !important;
    border-color:#d6e1ee !important;
}

#pagecontainer .bookable-session-card > *{
    cursor:pointer !important;
}

#pagecontainer .bookable-session-card .event-session-availability{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:10px !important;
    padding:18px 20px !important;
}

#pagecontainer .event-session-book-action{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    min-height:36px !important;
    padding:8px 11px !important;
    border:1px solid #bfd0eb !important;
    border-radius:8px !important;
    background:#edf4ff !important;
    color:#155eef !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
}

#pagecontainer .event-session-book-action .fa{
    cursor:pointer !important;
}

#pagecontainer .bookable-session-card:hover .event-session-book-action,
#pagecontainer .bookable-session-card:focus .event-session-book-action{
    border-color:#155eef !important;
    background:#155eef !important;
    color:#fff !important;
}

#pagecontainer .bookable-session-card:hover{
    border-color:#9fb9dd !important;
    box-shadow:0 10px 26px rgba(16,24,40,.09) !important;
}

@media(max-width:780px){
    #pagecontainer .bookable-session-card .event-session-availability{
        align-items:flex-start !important;
        padding:16px 20px 20px !important;
    }

    #pagecontainer .event-session-book-action{
        width:100% !important;
        box-sizing:border-box !important;
    }
}





/* =========================================================
   SESSION AVAILABILITY + BOOK ACTION STACK
   Prevent status badges and booking action being squashed.
   ========================================================= */
#pagecontainer .bookable-session-card .event-session-availability{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:10px !important;
    min-width:190px !important;
    padding:18px 20px !important;
    box-sizing:border-box !important;
}

#pagecontainer .bookable-session-card .event-session-availability .bgred,
#pagecontainer .bookable-session-card .event-session-availability .bggreen,
#pagecontainer .bookable-session-card .event-session-availability .bgorange{
    display:inline-block !important;
    width:auto !important;
    max-width:none !important;
    white-space:nowrap !important;
    flex:none !important;
    box-sizing:border-box !important;
}

#pagecontainer .event-session-book-action{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:auto !important;
    max-width:none !important;
    white-space:nowrap !important;
    flex:none !important;
    box-sizing:border-box !important;
}

@media(max-width:780px){
    #pagecontainer .bookable-session-card .event-session-availability{
        width:100% !important;
        min-width:0 !important;
        align-items:flex-start !important;
    }

    #pagecontainer .event-session-book-action{
        width:100% !important;
    }

    #pagecontainer .bookable-session-card .event-session-availability .bgred,
    #pagecontainer .bookable-session-card .event-session-availability .bggreen,
    #pagecontainer .bookable-session-card .event-session-availability .bgorange{
        width:auto !important;
    }
}





/* =========================================================
   SESSION ACTION COLUMN - FINAL WIDTH FIX
   ========================================================= */
#pagecontainer .bookable-session-card .event-session-availability{
    width:100% !important;
    min-width:0 !important;
    padding:18px 20px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:10px !important;
}

#pagecontainer .bookable-session-card .event-session-availability > .bgred,
#pagecontainer .bookable-session-card .event-session-availability > .bggreen,
#pagecontainer .bookable-session-card .event-session-availability > .bgorange,
#pagecontainer .bookable-session-card .event-session-availability > .fontgreen,
#pagecontainer .bookable-session-card .event-session-availability > .fontred{
    align-self:flex-end !important;
    width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
    line-height:1.3 !important;
}

#pagecontainer .event-session-book-action{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
}

@media(max-width:1050px){
    #pagecontainer .event-session-card{
        grid-template-columns:210px minmax(0,1fr) 230px !important;
    }
}

@media(max-width:780px){
    #pagecontainer .event-session-card{
        grid-template-columns:1fr !important;
    }

    #pagecontainer .bookable-session-card .event-session-availability{
        align-items:stretch !important;
    }

    #pagecontainer .bookable-session-card .event-session-availability > .bgred,
    #pagecontainer .bookable-session-card .event-session-availability > .bggreen,
    #pagecontainer .bookable-session-card .event-session-availability > .bgorange,
    #pagecontainer .bookable-session-card .event-session-availability > .fontgreen,
    #pagecontainer .bookable-session-card .event-session-availability > .fontred{
        align-self:flex-start !important;
    }
}





/* =========================================================
   SESSION CARD - CLEAN ACTION DESIGN
   Entire card is clickable; availability remains the label,
   circular arrow becomes the visual action.
   ========================================================= */

#pagecontainer .event-session-card{
    grid-template-columns:240px minmax(0,1fr) 180px !important;
}

#pagecontainer .bookable-session-card{
    cursor:pointer !important;
    border:1px solid #e1e7ee !important;
    background:#fff !important;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}

#pagecontainer .bookable-session-card,
#pagecontainer .bookable-session-card *{
    cursor:pointer !important;
}

#pagecontainer .bookable-session-card:hover,
#pagecontainer .bookable-session-card:focus{
    outline:0 !important;
    transform:translateY(-2px) !important;
    border-color:#a9bfdc !important;
    box-shadow:0 12px 30px rgba(16,24,40,.10) !important;
}

#pagecontainer .bookable-session-card .event-session-availability{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:center !important;
    gap:12px !important;
    min-width:0 !important;
    width:100% !important;
    padding:20px !important;
    box-sizing:border-box !important;
    border-left:1px solid #edf1f5 !important;
    background:#fbfcfe !important;
}

/* Availability/status stays compact and readable */
#pagecontainer .bookable-session-card .event-session-availability > .bgred,
#pagecontainer .bookable-session-card .event-session-availability > .bggreen,
#pagecontainer .bookable-session-card .event-session-availability > .bgorange,
#pagecontainer .bookable-session-card .event-session-availability > .fontgreen,
#pagecontainer .bookable-session-card .event-session-availability > .fontred{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:150px !important;
    margin:0 !important;
    padding:7px 10px !important;
    white-space:normal !important;
    text-align:center !important;
    line-height:1.25 !important;
    font-size:11px !important;
    font-weight:800 !important;
}

/* Simple circular action - no competing text */
#pagecontainer .event-session-book-action{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid #bfd0e7 !important;
    border-radius:50% !important;
    background:#edf4ff !important;
    color:#155eef !important;
    font-size:14px !important;
    line-height:1 !important;
    box-sizing:border-box !important;
    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease !important;
}

#pagecontainer .event-session-book-action .fa{
    margin:0 !important;
    padding:0 !important;
}

#pagecontainer .bookable-session-card:hover .event-session-book-action,
#pagecontainer .bookable-session-card:focus .event-session-book-action{
    transform:translateX(4px) !important;
    border-color:#155eef !important;
    background:#155eef !important;
    color:#fff !important;
}

@media(max-width:1050px){
    #pagecontainer .event-session-card{
        grid-template-columns:210px minmax(0,1fr) 170px !important;
    }
}

@media(max-width:780px){
    #pagecontainer .event-session-card{
        grid-template-columns:1fr !important;
    }

    #pagecontainer .bookable-session-card .event-session-availability{
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
        padding:16px 20px !important;
        border-left:0 !important;
        border-top:1px solid #edf1f5 !important;
    }

    #pagecontainer .bookable-session-card .event-session-availability > .bgred,
    #pagecontainer .bookable-session-card .event-session-availability > .bggreen,
    #pagecontainer .bookable-session-card .event-session-availability > .bgorange,
    #pagecontainer .bookable-session-card .event-session-availability > .fontgreen,
    #pagecontainer .bookable-session-card .event-session-availability > .fontred{
        max-width:none !important;
        text-align:left !important;
    }
}





/* Final circular session arrow */
#pagecontainer .bookable-session-card .event-session-book-action{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border:2px solid #155eef !important;
    border-radius:50% !important;
    background:#fff !important;
    color:#155eef !important;
    box-shadow:0 3px 9px rgba(21,94,239,.12) !important;
}

#pagecontainer .bookable-session-card .event-session-book-action .fa{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:15px !important;
    line-height:1 !important;
}

#pagecontainer .bookable-session-card:hover .event-session-book-action,
#pagecontainer .bookable-session-card:focus .event-session-book-action{
    background:#155eef !important;
    color:#fff !important;
    transform:translateX(3px) !important;
    box-shadow:0 5px 13px rgba(21,94,239,.22) !important;
}





/* Final compact Book button */
#pagecontainer .bookable-session-card .event-session-book-action{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    width:auto !important;
    height:auto !important;
    min-width:82px !important;
    min-height:38px !important;
    padding:9px 14px !important;
    border:1px solid #155eef !important;
    border-radius:8px !important;
    background:#155eef !important;
    color:#fff !important;
    box-shadow:none !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    white-space:nowrap !important;
}

#pagecontainer .bookable-session-card .event-session-book-action .fa{
    margin:0 !important;
    font-size:11px !important;
}

#pagecontainer .bookable-session-card:hover .event-session-book-action,
#pagecontainer .bookable-session-card:focus .event-session-book-action{
    background:#0f4fc9 !important;
    border-color:#0f4fc9 !important;
    color:#fff !important;
    transform:translateX(2px) !important;
    box-shadow:0 4px 10px rgba(21,94,239,.18) !important;
}





/* =========================================================
   REAL SESSION BOOK BUTTON
   New class deliberately avoids older event-session-book-action rules.
   ========================================================= */
#pagecontainer .bookable-session-card .session-book-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-width:90px !important;
    min-height:40px !important;
    padding:10px 16px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border:1px solid #155eef !important;
    border-radius:8px !important;
    background-color:#155eef !important;
    background-image:none !important;
    color:#ffffff !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:800 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    box-shadow:0 2px 5px rgba(21,94,239,.18) !important;
    cursor:pointer !important;
}

#pagecontainer .bookable-session-card .session-book-btn span,
#pagecontainer .bookable-session-card .session-book-btn i{
    display:inline-block !important;
    color:#ffffff !important;
    cursor:pointer !important;
}

#pagecontainer .bookable-session-card .session-book-btn i{
    margin:0 !important;
    padding:0 !important;
    font-size:11px !important;
    line-height:1 !important;
}

#pagecontainer .bookable-session-card:hover .session-book-btn,
#pagecontainer .bookable-session-card:focus .session-book-btn{
    background-color:#0f4fc9 !important;
    border-color:#0f4fc9 !important;
    color:#ffffff !important;
    box-shadow:0 4px 10px rgba(21,94,239,.22) !important;
    transform:translateX(2px) !important;
}

/* Not currently bookable: let the complete compact wrapper size to its content */
@media(min-width:601px){

    #pagecontainer #bookingwindow.bookingwindow-bookable{
        display:inline-block !important;
        width:auto !important;
        min-width:260px !important;
        max-width:none !important;
    }

    #pagecontainer #bookingwindow.bookingwindow-bookable > p{
        display:block !important;
        width:auto !important;
        min-width:100% !important;
        max-width:none !important;
        margin:0 !important;
    }

    #pagecontainer #bookingwindow.bookingwindow-bookable > p > a{
        display:block !important;
        width:auto !important;
        max-width:none !important;
    }

    #pagecontainer #bookingwindow .no-sessions-available{
        display:block !important;
        width:auto !important;
        min-width:260px !important;
        max-width:none !important;
        white-space:nowrap !important;
        box-sizing:border-box !important;
    }
}

/* =========================================================
   RESERVATION TIMER - STICK TO DRAWER BOTTOM
   Keep the 10-minute hold visible while drawer content scrolls.
   ========================================================= */
#modal-bookcourse #clockdiv{
    position:sticky !important;
    z-index:80 !important;
    right:auto !important;
    left:auto !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:14px 30px !important;
    border:0 !important;
    border-top:1px solid #d7e1ea !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:0 -8px 22px rgba(16,24,40,.08) !important;
}

#modal-bookcourse #clockdiv.hidden{
    display:none !important;
}

@media(max-width:720px){
    #modal-bookcourse #clockdiv{
        padding:13px 18px !important;
    }
}

/* =========================================================
   RESERVATION TIMER - FIXED TO DRAWER BOTTOM
   ========================================================= */
#modal-bookcourse #clockdiv{
    position:fixed !important;
    z-index:90 !important;
    right:0 !important;
    left:auto !important;
    top:auto !important;
    bottom:0 !important;
    width:min(720px,56vw) !important;
    max-width:720px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:14px 30px !important;
    border:0 !important;
    border-top:1px solid #d7e1ea !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:0 -8px 22px rgba(16,24,40,.08) !important;
}

/* Leave room for the fixed timer at the bottom of the drawer. */
#modal-bookcourse #courseinfoall{
    padding-bottom:110px !important;
}

@media(max-width:1050px){
    #modal-bookcourse #clockdiv{
        width:min(760px,72vw) !important;
        max-width:760px !important;
    }
}

@media(max-width:720px){
    #modal-bookcourse #clockdiv{
        left:0 !important;
        right:0 !important;
        width:100% !important;
        max-width:none !important;
        padding:13px 18px !important;
    }

    #modal-bookcourse #courseinfoall{
        padding-bottom:100px !important;
    }
}

/* =========================================================
   RESERVATION TIMER - DRAWER FOOTER
   #clockdiv is now a direct child of .event-booking-drawer.
   ========================================================= */
#modal-bookcourse .event-booking-drawer{
    position:relative !important;
    overflow:hidden !important;
}

#modal-bookcourse #courseinfoall{
    height:calc(100vh - 88px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
    padding-bottom:110px !important;
}

#modal-bookcourse #clockdiv{
    position:absolute !important;
    z-index:90 !important;
    right:0 !important;
    left:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:14px 30px !important;
    border:0 !important;
    border-top:1px solid #d7e1ea !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:0 -8px 22px rgba(16,24,40,.08) !important;
}

#modal-bookcourse #clockdiv.hidden{
    display:none !important;
}

@media(max-width:720px){
    #modal-bookcourse #courseinfoall{
        height:calc(100vh - 80px) !important;
        padding-bottom:100px !important;
    }

    #modal-bookcourse #clockdiv{
        padding:13px 18px !important;
    }
}

/* =========================================================
   SESSION CARDS - REMOVE DUPLICATE CIRCULAR ::AFTER ARROW
   The Book control already contains its own Font Awesome arrow.
   ========================================================= */
.event-session-card::after{
    content:none !important;
    display:none !important;
}

/* =========================================================
   SESSION AVAILABILITY - REMOVE OLD CIRCULAR ARROW
   Keep only the real .session-book-btn arrow.
   ========================================================= */
#pagecontainer .bookable-session-card .event-session-availability{
    padding-right:20px !important;
}

#pagecontainer .bookable-session-card .event-session-availability:after{
    content:none !important;
    display:none !important;
}

@media(max-width:780px){
    #pagecontainer .bookable-session-card .event-session-availability{
        padding-right:20px !important;
    }
}

/* =========================================================
   OVERVIEW + AT A GLANCE - MATCH CARD HEIGHTS
   When side-by-side, both cards stretch to the taller card.
   On mobile they return to their natural content height.
   ========================================================= */
#pagecontainer .event-main-grid{
    align-items:stretch !important;
}

#pagecontainer .event-main-grid > .event-panel{
    height:100% !important;
    box-sizing:border-box !important;
}

@media(max-width:900px){
    #pagecontainer .event-main-grid > .event-panel{
        height:auto !important;
    }
}

/* =========================================================
   OVERVIEW + AT A GLANCE - EQUAL HEIGHT
   These are .event-about and .event-details inside .event-info-grid.
   ========================================================= */
#pagecontainer .event-info-grid{
    align-items:stretch !important;
}

#pagecontainer .event-info-grid > .event-about,
#pagecontainer .event-info-grid > .event-details{
    height:100% !important;
    box-sizing:border-box !important;
}

@media(max-width:1050px){
    #pagecontainer .event-info-grid > .event-about,
    #pagecontainer .event-info-grid > .event-details{
        height:auto !important;
    }
}

/* Related Training - use normal page spacing; keep internal card padding. */
#pagecontainer .event-related{
    margin-top:0 !important;
}



/* =========================================================
   RELATED TRAINING - USE STANDARD EVENT CONTENT LAYOUT
   The section now lives in the same event-content rhythm as
   Overview / At a Glance rather than being independently spaced.
   ========================================================= */
#pagecontainer .event-related-content{
    display:block !important;
}

#pagecontainer .event-related-content .event-related{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

/* =========================================================
   RELATED TRAINING - LOAD MORE
   Show six cards initially, then reveal six more per click.
   ========================================================= */
#pagecontainer .event-related-card.event-related-extra{
    display:none !important;
}

#pagecontainer .event-related-card.event-related-extra.event-related-visible{
    display:block !important;
}

#pagecontainer .event-related-more{
    grid-column:1 / -1;
    display:flex;
    justify-content:center;
    padding-top:4px;
}

#pagecontainer .event-related-more-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    padding:10px 20px;
    border:1px solid #d8e0e8;
    border-radius:999px;
    background:#fff;
    color:#17324d;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(16,24,40,.05);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#pagecontainer .event-related-more-btn:hover{
    transform:translateY(-1px);
    border-color:#b9c7d5;
    box-shadow:0 6px 16px rgba(16,24,40,.08);
}



/* =========================================================
   OVERVIEW - READ MORE / SHOW LESS
   Long descriptions initially show approximately two paragraphs.
   ========================================================= */
#pagecontainer .event-description-wrap{
    position:relative;
}

#pagecontainer .event-description.event-description-collapsed{
    position:relative;
    max-height:18em;
    overflow:hidden;
}

#pagecontainer .event-description.event-description-collapsed:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3em;
    background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);
    pointer-events:none;
}

#pagecontainer .event-description-toggle{
    display:none;
    align-items:center;
    gap:7px;
    margin-top:12px;
    padding:0;
    border:0;
    background:transparent;
    color:#155eef;
    font:inherit;
    font-weight:700;
    cursor:pointer;
}

#pagecontainer .event-description-toggle:hover{
    text-decoration:underline;
}

#pagecontainer .event-description-toggle i{
    font-size:11px;
}


/* Overview Read More - polished pill button */
#pagecontainer .event-description-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:max-content;
    min-height:40px;
    margin-top:16px;
    padding:9px 16px;
    border:1px solid #d8e3ef;
    border-radius:999px;
    background:#f7faff;
    color:#174f87;
    font:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 2px 7px rgba(16,24,40,.05);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

#pagecontainer .event-description-toggle:hover{
    background:#fff;
    border-color:#b9cce0;
    box-shadow:0 5px 14px rgba(16,24,40,.09);
    transform:translateY(-1px);
    text-decoration:none;
}

#pagecontainer .event-description-toggle:focus-visible{
    outline:3px solid rgba(21,94,239,.18);
    outline-offset:2px;
}

#pagecontainer .event-description-toggle i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#e8f1fb;
    font-size:9px;
    transition:transform .18s ease;
}


/* =========================================================
   DRAWER BOTTOM CLEARANCE
   Keep the final form paragraph/content clear of the fixed timer footer.
   ========================================================= */
#modal-bookcourse #courseinfoall{
    padding-bottom:150px !important;
}

@media(max-width:720px){
    #modal-bookcourse #courseinfoall{
        padding-bottom:135px !important;
    }
}


/* =========================================================
   DRAWER STRUCTURE - SCROLLING CONTENT + FIXED FOOTER TIMER
   Timer is a sibling of #courseinfoall, so it cannot overlap Book Now.
   ========================================================= */
#modal-bookcourse .event-booking-drawer{
    display:flex !important;
    flex-direction:column !important;
    height:100vh !important;
    overflow:hidden !important;
}

#modal-bookcourse .event-modal-header{
    flex:0 0 auto !important;
}

#modal-bookcourse #courseinfoall{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-bottom:32px !important;
}

#modal-bookcourse #clockdiv{
    position:static !important;
    flex:0 0 auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    padding:14px 30px !important;
    border:0 !important;
    border-top:1px solid #d7e1ea !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:0 -8px 22px rgba(16,24,40,.08) !important;
    z-index:2 !important;
}

#modal-bookcourse #clockdiv.hidden{
    display:none !important;
}

@media(max-width:720px){
    #modal-bookcourse #courseinfoall{
        padding-bottom:24px !important;
    }

    #modal-bookcourse #clockdiv{
        padding:13px 18px !important;
    }
}

/* No sessions available empty state */
#pagecontainer .event-empty-state{display:flex;align-items:flex-start;gap:18px;width:100%;box-sizing:border-box;padding:24px;border:1px solid #dfe6ee;border-radius:16px;background:#f8fafc;}
#pagecontainer .event-empty-state-icon{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#eef4fb;color:#47749f;font-size:20px;}
#pagecontainer .event-empty-state-content{min-width:0;}
#pagecontainer .event-empty-state-kicker{display:block;margin:0 0 5px;color:#667085;font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
#pagecontainer .event-empty-state h3{margin:0 0 7px;padding:0;color:#172033;font-size:18px;line-height:1.3;font-weight:700;}
#pagecontainer .event-empty-state p{margin:0;padding:0;color:#667085;font-size:14px;line-height:1.55;}
@media(max-width:620px){
#pagecontainer .event-empty-state{gap:14px;padding:18px;}
#pagecontainer .event-empty-state-icon{flex-basis:42px;width:42px;height:42px;border-radius:12px;font-size:18px;}
}


/* Related Training AJAX loading state */
#pagecontainer .event-related-more-btn:disabled{
    cursor:wait;
    opacity:.72;
    transform:none;
}
#pagecontainer .event-related-more-btn .fa-spinner{
    font-size:12px;
}