/* ================================
   Spa Module - Base Layout
================================ */

.spa-module {
    margin-bottom: 1.875rem; 
}

.spa-module .container .column-inner {
    padding: 1.25rem 1.875rem; 
}

.spa-module .container .column-inner.white {
    padding: 0.625rem 1.25rem; 
}

.spa-module .column-inner .module-heading, .spa-module .column-inner .list-heading {
    margin-top: 0.625rem; /* 10px */
}

/* ================================
   Background Colour Variants
================================ */

.spa-module .white, .lorem .list-module.white { 
    background-color: #ffffff; 
}
.spa-module .lgrey, .lorem .list-module.lgrey { 
    background-color: #f4f4f4; 
}
.spa-module .blue, .lorem .list-module.blue { 
    background-color: #edf5fa;
}

.spa-module .two-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

/* ================================
   Module content Styling
================================ */

/* Images inside module */
.spa-module .module-description img.alignleft,
.spa-module .module-description img.alignright {
    float: none;
    margin: 0;
}

.spa-module .module-description img {
    max-width: 100%;
    height: auto;
}

.spa-module .container .column-inner li>a,
.spa-module .container .column-inner li {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.spa-module .module-description iframe {
  max-width: 100%;
}

/* ================================
   Services List Styling
================================ */

.spa-module .services-list .service-box {
    border: 1px solid #ececec;
    padding: 5px 10px 5px 15px;
    margin: 10px 0px 20px 0px;
    border-radius: 6px;
    background: #ebf6fd;
}

.spa-module .services-list .service-box h5 {
    margin: 1.1rem 0;
}

.spa-module .services-list .service-box p, 
.spa-module .services-list .service-box ul>li { 
    font-size: 1.1rem;
}

.spa-module .services-list .service-time {
    position: relative;
    padding: 5px 7px 5px 25px;
    background: #e9f4ce;
    border-radius: 4px;
    font-size: 1rem;
    line-height: 1.08rem;
    display: inline-block;
}

.spa-module .services-list .service-time:before {
    content: "\f017";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #83a82e;
    font-size: 0.85rem;
    position: absolute;
    padding: 1px 0 0 6px;
    left: 0;
}

/* ================================
   Accordion Styling
================================ */

.spa-module .js-accordion {
    border: none
}

.spa-module .js-accordion button.js-accordion__header {
    background: #0077be;
    color: #fff;
    border: solid 3px #0077be;
    margin-bottom: 10px;
    border-radius: 4px 4px 0 0;
}

.spa-module .js-accordion .js-accordion__panel {
    margin-bottom: 20px;
    border: solid 1px #f4f4f4;
    border-radius: 4px 4px;
}

.spa-module .accordion-1 > button.js-accordion__header::before {
    content: "\f0da";
    left: auto;
    color: #fff;
    font-size: 2rem;
    pointer-events: none;
    position: absolute;
    top: 25%;
    right: 1.5rem;
    transform: rotate(0);
}

.spa-module .js-accordion__header[aria-expanded="true"]::before {
    transform: rotate(90deg) !important;
}

/* ================================
   Sidebar Signup Form Styling
================================ */

.page-template-template-teaching-spa .mc4wp-form-fields input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.875rem;
  border: 2px solid #f4f4f4;
  border-radius: 4px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.page-template-template-teaching-spa .mc4wp-form-fields input[type="email"]:focus {
  border-color: #0077be;
  outline: none;
}

.page-template-template-teaching-spa .mc4wp-form-fields input[type="submit"], .widget .appt-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  background-color: #0077be;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.page-template-template-teaching-spa .mc4wp-form-fields input[type="submit"]:hover, .widget .appt-btn:hover {
  background-color: #0a4a9d;
}

/* Desktop Styles */
@media (min-width: 769px) {
    .spa-module .two-column-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .two-column-grid.has-heading-row .module-heading-wrap {
        min-height: 3.5rem;
    }

    .module-heading {
        margin: 0;
    }
}