body.appointly-template-studio {
  --studio-primary: #f43f35;
  --studio-secondary: #202942;
  --studio-accent: var(--studio-primary);
  --studio-accent-dark: var(--studio-secondary);
  --studio-ink: var(--studio-secondary);
  --studio-muted: #66718a;
  --studio-line: #d7deec;
  --studio-soft: #f7f9fd;
  --studio-card: #ffffff;
  background: #ffffff !important;
  color: var(--studio-ink);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

body.appointly-template-studio #wrapper {
  padding: 8px 24px 42px !important;
}

/* Content width matches the default/court template (1200px), so the studio
   booking page lines up with every other one instead of sprawling to 1500px.
   Gutters restored at the studio's own 18px rather than the base 32px, which
   keeps the header and this container flush with each other. */
body.appointly-template-studio #content > .container {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  gap: 36px;
  width: min(1200px, 100%);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}

body.appointly-template-studio .appointly-standalone-header {
  padding: 18px 24px 0;
}

body.appointly-template-studio .appointly-standalone-header-container {
  /* Was max-width:1500px, which beat the base rule's max-width:100% on
     specificity and left this pinned at its 1200px width on every viewport.
     Measured 839px of horizontal overflow at 390px and 471px at 768px: the
     booking page scrolled sideways and clipped cards on any phone. */
  max-width: 100%;
  min-height: 64px;
  padding: 12px 18px;
  border-color: var(--studio-line);
  border-radius: 8px;
  box-shadow: 0 12px 34px rgba(32, 41, 66, 0.06);
}

body.appointly-template-studio .appointly-standalone-brand img {
  width: auto;
  max-width: 148px;
  height: 38px;
  object-fit: contain;
}

body.appointly-template-studio .appointly-account-avatar-btn,
body.appointly-template-studio .appointly-standalone-help-btn {
  border-radius: 8px;
  border-color: var(--studio-line);
  box-shadow: none;
}

body.appointly-template-studio .appointly-standalone-titlebar {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0 0 16px;
  padding: 0;
  text-align: left;
}

body.appointly-template-studio .appointly-standalone-titlebar h1 {
  margin: 0 0 6px;
  color: var(--studio-ink);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
}

body.appointly-template-studio .appointly-standalone-titlebar p {
  max-width: 640px;
  margin: 0;
  color: var(--studio-muted);
  font-size: 15px;
  line-height: 1.5;
}

body.appointly-template-studio .appointly-standalone-progress {
  position: sticky;
  top: 24px;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
  width: 100%;
  margin: 0;
  padding: 28px 24px;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: var(--studio-card);
  box-shadow: 0 18px 42px rgba(32, 41, 66, 0.08);
}

body.appointly-template-studio .appointly-standalone-progress ol {
  display: grid;
  gap: 24px;
  width: 100%;
}

body.appointly-template-studio .appointly-standalone-progress-step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 46px;
  color: #59647c;
  font-size: 18px;
  font-weight: 750;
  text-align: left;
}

body.appointly-template-studio .appointly-standalone-progress-step:not(:last-child)::after {
  display: none;
}

body.appointly-template-studio .appointly-standalone-progress-step i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--studio-secondary);
  border-radius: 8px;
  background: #ffffff;
  color: var(--studio-secondary);
  font-size: 0;
  font-family: inherit !important;
  line-height: 1;
  text-indent: -9999px;
  overflow: hidden;
  box-shadow: none;
}

body.appointly-template-studio .appointly-standalone-progress-step i::before {
  content: "";
  flex: 0 0 auto;
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  text-indent: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body.appointly-template-studio .appointly-standalone-progress-step i::after {
  display: none !important;
  content: none !important;
}

body.appointly-template-studio .appointly-standalone-progress-step[data-standalone-step="1"] i::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='5' rx='1.2' fill='black'/%3E%3Crect x='4' y='14' width='16' height='5' rx='1.2' fill='black'/%3E%3Ccircle cx='8' cy='7.5' r='1.2' fill='white'/%3E%3Ccircle cx='8' cy='16.5' r='1.2' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='5' width='16' height='5' rx='1.2' fill='black'/%3E%3Crect x='4' y='14' width='16' height='5' rx='1.2' fill='black'/%3E%3Ccircle cx='8' cy='7.5' r='1.2' fill='white'/%3E%3Ccircle cx='8' cy='16.5' r='1.2' fill='white'/%3E%3C/svg%3E");
}

body.appointly-template-studio .appointly-standalone-progress-step[data-standalone-step="2"] i::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E");
}

body.appointly-template-studio .appointly-standalone-progress-step[data-standalone-step="3"] i::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3V2Zm13 9H4v9h16v-9ZM4 9h16V7H4v2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v3h6V2h2v3h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3V2Zm13 9H4v9h16v-9ZM4 9h16V7H4v2Z'/%3E%3C/svg%3E");
}

body.appointly-template-studio .appointly-standalone-progress-step[data-standalone-step="4"] i::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E");
}

body.appointly-template-studio .appointly-standalone-progress-step[data-standalone-step="5"] i::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm2 5v2h6v-2H5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 4h18V7H3v2Zm2 5v2h6v-2H5Z'/%3E%3C/svg%3E");
}

body.appointly-template-studio .appointly-standalone-progress-step[data-standalone-step="6"] i::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V8a3 3 0 0 0-6 0v2Zm2 5v3h2v-3h-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V8a3 3 0 0 0-6 0v2Zm2 5v3h2v-3h-2Z'/%3E%3C/svg%3E");
}

body.appointly-template-studio .appointly-standalone-progress-step[data-standalone-step="7"] i::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.2 16.6-4.1-4.1-1.4 1.4 5.5 5.5L20.5 8.1l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.2 16.6-4.1-4.1-1.4 1.4 5.5 5.5L20.5 8.1l-1.4-1.4z'/%3E%3C/svg%3E");
}

body.appointly-template-studio .appointly-standalone-progress-step.is-active {
  color: var(--studio-accent);
}

body.appointly-template-studio .appointly-standalone-progress-step.is-active i {
  border-color: var(--studio-accent);
  background: var(--studio-accent);
  color: #ffffff;
  box-shadow: 0 16px 28px rgba(244, 63, 53, 0.22);
}

body.appointly-template-studio .appointly-login-method-card {
  width: 100%;
  max-width: 800px !important;
}

body.appointly-template-studio #response,
body.appointly-template-studio #appointment-form {
  grid-column: 2;
  min-width: 0;
}

body.appointly-template-studio #response:empty {
  display: none;
}

body.appointly-template-studio #response:not(:empty) {
  grid-row: 1;
  align-self: start;
}

body.appointly-template-studio #appointment-form {
  grid-row: 1;
  align-self: start;
}

body.appointly-template-studio #response:not(:empty) + #appointment-form {
  grid-row: 2;
}

body.appointly-template-studio #appointment-form > .row,
body.appointly-template-studio .main_wrapper {
  margin: 0;
  width: 100%;
}

body.appointly-template-studio .main_wrapper {
  min-height: 690px;
  padding: 38px 42px 38px !important;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(32, 41, 66, 0.07);
  overflow: hidden;
}

body.appointly-template-studio .booking-step > h4,
body.appointly-template-studio .appointly-standalone-step-title h2,
body.appointly-template-studio .booking-step h4.tw-text-lg {
  margin: 0 0 22px !important;
  color: var(--studio-ink);
  font-size: 26px !important;
  font-weight: 850 !important;
  line-height: 1.18;
}

body.appointly-template-studio .appointly-standalone-step-title p {
  color: var(--studio-muted);
  font-size: 15px;
}

body.appointly-template-studio #appointly-booking-services {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 32px !important;
}

body.appointly-template-studio.appointly-services-view-list #appointly-booking-services {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

body.appointly-template-studio .appointly-service-gallery-card,
body.appointly-template-studio .provider-card {
  position: relative;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 26px;
  min-height: 224px;
  padding: 30px;
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  background: #ffffff;
  box-shadow: none !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body.appointly-template-studio .apptly-list-outer {
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  background: #ffffff;
  box-shadow: none !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body.appointly-template-studio .apptly-list-outer:hover,
body.appointly-template-studio .apptly-list-outer.selected {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 18px 34px rgba(32, 41, 66, 0.08) !important;
  transform: translateY(-1px);
}

body.appointly-template-studio .apptly-list-card {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  min-height: 144px;
}

body.appointly-template-studio .apptly-list-color-bar {
  width: 6px;
  min-height: 100%;
}

body.appointly-template-studio .apptly-list-content {
  padding: 24px 28px;
}

body.appointly-template-studio .apptly-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.appointly-template-studio .apptly-list-name {
  margin: 0;
  color: #505b73;
  font-size: 24px;
  font-weight: 780;
  line-height: 1.2;
}

body.appointly-template-studio .apptly-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

body.appointly-template-studio .apptly-list-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--studio-soft);
  color: #59647c;
  font-size: 14px;
  font-weight: 750;
}

body.appointly-template-studio .apptly-list-badge-price {
  background: var(--studio-accent);
  color: #ffffff;
}

body.appointly-template-studio .apptly-list-desc {
  max-width: 760px;
  margin: 14px 0 0;
  color: var(--studio-muted);
  font-size: 15px;
  line-height: 1.55;
}

body.appointly-template-studio .apptly-list-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 18px;
}

body.appointly-template-studio .appointly-service-gallery-card:hover,
body.appointly-template-studio .appointly-service-gallery-card.selected,
body.appointly-template-studio .provider-card:hover,
body.appointly-template-studio .provider-card.selected {
  border-color: var(--studio-accent) !important;
  box-shadow: 0 20px 42px rgba(32, 41, 66, 0.1) !important;
  transform: translateY(-1px);
}

body.appointly-template-studio .appointly-service-gallery-card.selected::after,
body.appointly-template-studio .provider-card.selected::after {
  content: "\f00c";
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--studio-accent);
  color: #ffffff;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 18px;
}

body.appointly-template-studio .appointly-service-gallery-photo {
  width: 76px;
  height: 76px;
  aspect-ratio: auto;
  border-radius: 999px;
  align-self: start;
}

body.appointly-template-studio .appointly-service-gallery-body {
  padding: 0;
  text-align: left;
}

body.appointly-template-studio .appointly-service-gallery-title {
  min-height: 0;
  margin: 0 0 12px;
  padding-right: 42px;
  color: #505b73;
  font-size: 27px;
  font-weight: 760;
  line-height: 1.18;
}

body.appointly-template-studio .appointly-service-read-more {
  color: var(--studio-muted);
  font-size: 14px;
  font-weight: 700;
}

body.appointly-template-studio .appointly-service-gallery-meta {
  justify-content: flex-start;
  gap: 22px;
  margin-top: 22px;
  color: #7a8498;
  font-size: 20px;
}

body.appointly-template-studio .appointly-service-gallery-price {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--studio-accent);
  color: #ffffff;
  font-size: 20px;
  font-weight: 850;
}

body.appointly-template-studio .appointly-service-gallery-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 22px;
}

body.appointly-template-studio .appointly-service-quantity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 6px 9px 6px 12px;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: #ffffff;
  color: #59647c;
  font-size: 15px;
  font-weight: 800;
}

body.appointly-template-studio .appointly-service-quantity > i {
  color: #7a8498;
}

body.appointly-template-studio .appointly-service-quantity-value {
  min-width: 18px;
  text-align: center;
}

body.appointly-template-studio .appointly-service-quantity-controls {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

body.appointly-template-studio .appointly-service-quantity-step {
  width: 18px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: var(--studio-soft);
  color: #59647c;
  line-height: 1;
}

body.appointly-template-studio .appointly-service-quantity-step:hover {
  background: var(--studio-accent);
  color: #ffffff;
}

body.appointly-template-studio .appointly-service-select.btn,
body.appointly-template-studio .apptly-list-select-btn {
  min-height: 44px;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  background: var(--studio-soft);
  color: #505b73;
  font-size: 15px;
  font-weight: 800;
}

body.appointly-template-studio .appointly-service-gallery-card.selected .appointly-service-select,
body.appointly-template-studio .appointly-service-select:hover,
body.appointly-template-studio .appointly-service-select:focus {
  border-color: var(--studio-accent);
  background: var(--studio-accent);
  color: #ffffff;
}

body.appointly-template-studio .provider-card {
  max-width: 420px;
}

body.appointly-template-studio .provider-card img,
body.appointly-template-studio .provider-card .staff-profile-image {
  width: 110px !important;
  height: 110px !important;
  border-radius: 8px !important;
  object-fit: cover;
}

body.appointly-template-studio .appointly-default-scheduler {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.9fr);
  gap: 32px;
}

body.appointly-template-studio .appointly-default-scheduler > .tw-bg-white {
  margin: 0 !important;
  border-color: var(--studio-line) !important;
  border-radius: 0 !important;
  box-shadow: none;
}

body.appointly-template-studio #time-slots-section {
  display: block;
  min-height: 470px;
}

body.appointly-template-studio #time-slots-section.tw-hidden {
  display: none;
}

body.appointly-template-studio #time-slots-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

body.appointly-template-studio .time-slot,
body.appointly-template-studio .time-slot-btn,
body.appointly-template-studio [data-time-slot] {
  min-height: 58px;
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #505b73 !important;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
}

body.appointly-template-studio .time-slot.selected,
body.appointly-template-studio .time-slot-btn.selected,
body.appointly-template-studio [data-time-slot].selected {
  border-color: var(--studio-accent) !important;
  background: #fff6f5 !important;
  color: var(--studio-accent-dark) !important;
}

body.appointly-template-studio .datepicker,
body.appointly-template-studio .datepicker-days,
body.appointly-template-studio .table-condensed {
  width: 100%;
}

body.appointly-template-studio .datepicker table tr td,
body.appointly-template-studio .datepicker table tr th {
  width: 14.285%;
  height: 58px;
  border-radius: 0;
  color: #7a8498;
  font-size: 17px;
}

body.appointly-template-studio .datepicker table tr td.active,
body.appointly-template-studio .datepicker table tr td.active:hover {
  background: var(--studio-accent) !important;
  color: #ffffff !important;
}

body.appointly-template-studio .form-control,
body.appointly-template-studio .bootstrap-select > .btn {
  min-height: 46px;
  border-color: var(--studio-line);
  border-radius: 8px;
  color: var(--studio-ink);
  box-shadow: none;
}

body.appointly-template-studio .form-control:focus,
body.appointly-template-studio .bootstrap-select.open > .btn {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 3px rgba(244, 63, 53, 0.1);
}

body.appointly-template-studio .appointly-standalone-step-actions,
body.appointly-template-studio .tw-flex.tw-justify-end.tw-mt-6:not(.hidden) {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin: 34px -42px 0;
  padding: 22px 42px;
  border-top: 1px solid var(--studio-line);
  background: #ffffff;
}

body.appointly-template-studio .btn-primary,
body.appointly-template-studio .appointly-standalone-primary-action {
  min-height: 56px;
  border: 0;
  border-radius: 8px;
  background: var(--studio-accent) !important;
  color: #ffffff !important;
  padding: 13px 28px;
  font-size: 18px;
  font-weight: 850;
  box-shadow: none;
}

body.appointly-template-studio .btn-primary:hover,
body.appointly-template-studio .btn-primary:focus {
  background: var(--studio-accent-dark) !important;
}

body.appointly-template-studio .btn-default,
body.appointly-template-studio .btn-prev-step {
  color: #59647c;
  font-size: 17px;
  font-weight: 760;
}

body.appointly-template-studio .appointly-addon-step-panel,
body.appointly-template-studio .appointly-standalone-panel,
body.appointly-template-studio .appointly-custom-booking-summary,
body.appointly-template-studio #step-4 > .tw-bg-white,
body.appointly-template-studio #step-5 .appointly-standalone-panel {
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  background: #ffffff;
  box-shadow: none;
}

body.appointly-template-studio .appointly-addon-step-option,
body.appointly-template-studio .appointly-addon-step-pricing-option {
  border-radius: 8px;
}

body.appointly-template-studio .appointly-account-modal-panel,
body.appointly-template-studio #appointly-service-details-modal .modal-content {
  border-radius: 8px;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .appointly-standalone-step-title p,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 > .tw-flex.tw-justify-between.tw-items-center.tw-mb-6 {
  display: none !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .appointly-standalone-step-title {
  margin-bottom: 18px;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-calendar-statusbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.46fr);
  gap: 0;
  width: calc(50% - 16px);
  margin: -64px 0 32px auto;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-duration-summary,
body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-price-summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  color: var(--studio-secondary);
  font-size: 17px;
  font-weight: 650;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-duration-summary {
  justify-content: space-between;
  background: color-mix(in srgb, var(--studio-secondary) 5%, #ffffff);
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-duration-summary .fa-clock-o {
  flex: 0 0 auto;
  color: var(--studio-secondary);
  font-size: 17px;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-duration-summary span {
  flex: 1 1 auto;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-price-summary {
  justify-content: flex-end;
  border-left: 1px solid var(--studio-line);
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-price-summary strong {
  color: var(--studio-secondary);
  font-weight: 850;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-default-scheduler {
  display: grid;
  grid-template-columns: minmax(430px, 0.96fr) minmax(360px, 0.96fr);
  gap: 32px;
  align-items: start;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-default-scheduler > .tw-bg-white {
  min-height: 392px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-default-scheduler .tw-grid {
  display: block !important;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-date-column {
  min-height: 392px;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-date-column > label,
body.appointly-template-studio.appointly-calendar-studio-view .appointly-timezone-column {
  display: none !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #appointly-date-picker-shell {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.appointly-template-studio.appointly-calendar-studio-view #appointment-date {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker-inline {
  width: 100%;
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker table {
  width: 100%;
  table-layout: fixed;
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td {
  height: 54px;
  border: 1px solid var(--studio-line);
  border-radius: 0 !important;
  color: color-mix(in srgb, var(--studio-secondary) 72%, #ffffff);
  font-size: 16px;
  font-weight: 500;
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th {
  height: 48px;
  color: var(--studio-secondary);
  background: #ffffff;
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th.prev,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th.next,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th.datepicker-switch {
  height: 56px;
  border-bottom: 1px solid var(--studio-line);
  font-size: 19px;
  font-weight: 760;
  color: var(--studio-secondary);
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th.prev:hover,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th.next:hover,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td.day:not(.disabled):hover {
  color: var(--studio-primary);
  background: color-mix(in srgb, var(--studio-primary) 8%, #ffffff);
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td.old,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td.new,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td.disabled {
  color: #b8bfcb !important;
  background: #fbfcfe;
}

body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td.active,
body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td.active:hover {
  background: var(--studio-primary) !important;
  color: #ffffff !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker {
  position: static !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_timepicker {
  display: none !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_datepicker {
  width: 100% !important;
  margin: 0 !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_monthpicker {
  min-height: 58px;
  display: flex;
  align-items: center;
  overflow: visible;
  position: relative;
  z-index: 30;
  border: 1px solid var(--studio-line);
  border-bottom: 0;
  background: #ffffff;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_prev,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_next {
  position: static;
  width: 64px;
  height: 58px;
  margin: 0;
  opacity: 1;
  background: none !important;
  color: var(--studio-secondary);
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_prev::before,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_next::before {
  display: block;
  width: 18px;
  height: 18px;
  margin: 20px auto;
  background: currentColor;
  line-height: 58px;
  text-align: center;
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.4 19.4 8 12l7.4-7.4L14 3.2 5.2 12l8.8 8.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.4 19.4 8 12l7.4-7.4L14 3.2 5.2 12l8.8 8.8z'/%3E%3C/svg%3E");
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m8.6 19.4 7.4-7.4-7.4-7.4L10 3.2l8.8 8.8-8.8 8.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m8.6 19.4 7.4-7.4-7.4-7.4L10 3.2l8.8 8.8-8.8 8.8z'/%3E%3C/svg%3E");
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_prev:hover,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_next:hover {
  color: var(--studio-primary);
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label {
  flex: 1 1 auto;
  position: relative;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 58px;
  margin: 0 !important;
  padding: 0 12px !important;
  color: var(--studio-secondary) !important;
  font-size: 19px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  background: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  overflow: visible !important;
  transition: color 0.18s ease, background 0.18s ease;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label:hover,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label.xdsoft_label_opened {
  color: var(--studio-primary) !important;
  background: #f8fafc !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label > span {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label i {
  position: relative;
  display: inline-block !important;
  width: 11px;
  height: 11px;
  margin: 0;
  background: none !important;
  opacity: 1;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label i::before {
  position: absolute;
  inset: 1px 0 0 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_select {
  top: calc(100% + 8px) !important;
  left: 50% !important;
  z-index: 10080 !important;
  width: 180px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 6px !important;
  overflow: visible !important;
  background: #ffffff !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 42px rgba(32, 41, 66, 0.16) !important;
  transform: translateX(-50%);
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_monthselect {
  width: 190px !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_yearselect {
  width: 132px !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_select .xdsoft_scroller_box {
  max-height: 248px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_select .xdsoft_scroller {
  right: 4px !important;
  width: 4px !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-primary) 24%, #ffffff) !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_select div {
  min-height: 38px;
  padding: 9px 12px !important;
  border-radius: 6px;
  color: var(--studio-secondary) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 20px !important;
  text-align: left;
  transition: color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_select div:hover,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_select div.xdsoft_current {
  background: #f8fafc !important;
  color: var(--studio-primary) !important;
  box-shadow: inset 3px 0 0 var(--studio-primary);
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar th,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td {
  height: 54px;
  border: 1px solid var(--studio-line) !important;
  background: #ffffff !important;
  color: color-mix(in srgb, var(--studio-secondary) 72%, #ffffff);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar th {
  height: 48px;
  color: var(--studio-secondary);
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td > div {
  padding: 0;
  line-height: 54px;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled {
  background: #fbfcfe !important;
  color: #b8bfcb !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current:hover,
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today.xdsoft_current {
  background: var(--studio-primary) !important;
  color: #ffffff !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar td:not(.xdsoft_disabled):not(.xdsoft_current):hover {
  background: color-mix(in srgb, var(--studio-primary) 8%, #ffffff) !important;
  color: var(--studio-primary) !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #time-slots-section {
  display: block;
  min-height: 392px;
  margin: 0 !important;
  padding: 30px 28px !important;
  border: 1px solid var(--studio-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

body.appointly-template-studio.appointly-calendar-studio-view #time-slots-section.tw-hidden {
  display: block !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #time-slots-section::before {
  content: "Time Slot";
  display: block;
  margin-bottom: 22px;
  color: var(--studio-secondary);
  font-size: 22px;
  font-weight: 850;
}

body.appointly-template-studio.appointly-calendar-studio-view #time-slots-container {
  display: block !important;
}

body.appointly-template-studio.appointly-calendar-studio-view #time-slots-container:empty::before {
  content: "Select a date to view available time slots.";
  display: block;
  color: #7b879b;
  font-size: 15px;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-slot-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: min(430px, 100%);
  transition: gap 0.22s ease;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-slot-row.is-selected {
  gap: 10px;
}

body.appointly-template-studio.appointly-calendar-studio-view .time-slot-btn {
  display: block;
  width: min(260px, 100%);
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--studio-line) !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  color: var(--studio-secondary) !important;
  text-align: left;
  font-size: 16px;
  font-weight: 650;
  box-shadow: none !important;
}

body.appointly-template-studio.appointly-calendar-studio-view .time-slot-btn:hover,
body.appointly-template-studio.appointly-calendar-studio-view .time-slot-btn.selected,
body.appointly-template-studio.appointly-calendar-studio-view .time-slot-btn.active {
  border-color: var(--studio-primary) !important;
  background: color-mix(in srgb, var(--studio-primary) 8%, #ffffff) !important;
  color: var(--studio-primary) !important;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-slot-row.is-selected .time-slot-btn {
  width: min(230px, calc(100% - 116px));
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-slot-next-btn {
  flex: 0 0 0;
  width: 0;
  min-height: 58px;
  margin: 0 0 14px;
  padding: 0;
  border: 0 solid var(--studio-primary);
  border-radius: 4px;
  background: var(--studio-primary);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-12px);
  transition: flex-basis 0.22s ease, width 0.22s ease, padding 0.22s ease, border-width 0.22s ease, opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-slot-row.is-selected .appointly-studio-slot-next-btn {
  flex-basis: 106px;
  width: 106px;
  padding: 0 16px;
  border-width: 1px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-slot-next-btn i {
  margin-left: 8px;
}

body.appointly-template-studio.appointly-calendar-studio-view #time-range-fields {
  max-width: 100%;
}

body.appointly-template-studio.appointly-calendar-studio-view #time-range-fields .tw-grid {
  display: grid !important;
}

body.appointly-template-studio.appointly-calendar-studio-view .appointly-date-time-price-summary {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 1199px) {
  body.appointly-template-studio #content > .container {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
  }

  body.appointly-template-studio #appointly-booking-services {
    grid-template-columns: 1fr !important;
  }

  body.appointly-template-studio .appointly-default-scheduler {
    grid-template-columns: 1fr;
  }

  body.appointly-template-studio .appointly-login-method-card {
    width: 100%;
    max-width: 100% !important;
  }

  body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-calendar-statusbar {
    width: 100%;
    margin: 0 0 18px;
  }

  body.appointly-template-studio.appointly-calendar-studio-view .appointly-default-scheduler {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body.appointly-template-studio #wrapper {
    padding: 10px 14px 104px !important;
  }

  body.appointly-template-studio .appointly-standalone-header {
    padding: 12px 14px 0;
  }

  body.appointly-template-studio #content > .container {
    display: block;
  }

  body.appointly-template-studio .appointly-standalone-titlebar {
    margin-bottom: 14px;
  }

  body.appointly-template-studio .appointly-standalone-titlebar h1 {
    font-size: 22px;
  }

  body.appointly-template-studio .appointly-standalone-progress {
    position: static;
    margin-bottom: 18px;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 14px 34px rgba(32, 41, 66, 0.07);
    overflow-x: auto;
  }

  body.appointly-template-studio .appointly-standalone-progress ol {
    display: flex;
    min-width: max-content;
    gap: 0;
  }

  body.appointly-template-studio .appointly-standalone-progress-step {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 86px;
    min-height: 74px;
    padding: 12px 10px 10px;
    gap: 8px;
    font-size: 0;
  }

  body.appointly-template-studio .appointly-standalone-progress-step span {
    display: none;
  }

  body.appointly-template-studio .appointly-standalone-progress-step i {
    width: 34px;
    height: 34px;
  }

  body.appointly-template-studio .appointly-standalone-progress-step.is-active {
    border-bottom: 3px solid var(--studio-accent);
  }

  body.appointly-template-studio .main_wrapper {
    min-height: 0;
    padding: 28px 20px 0 !important;
  }

  body.appointly-template-studio .booking-step > h4,
  body.appointly-template-studio .appointly-standalone-step-title h2,
  body.appointly-template-studio .booking-step h4.tw-text-lg {
    font-size: 23px !important;
  }

  body.appointly-template-studio .appointly-service-gallery-card,
  body.appointly-template-studio .apptly-list-outer,
  body.appointly-template-studio .provider-card {
    display: block;
    min-height: 0;
    padding: 28px 20px;
    text-align: center;
  }

  body.appointly-template-studio .apptly-list-card {
    display: block;
    min-height: 0;
  }

  body.appointly-template-studio .apptly-list-color-bar {
    display: none;
  }

  body.appointly-template-studio .apptly-list-content {
    padding: 0;
  }

  body.appointly-template-studio .apptly-list-top,
  body.appointly-template-studio .apptly-list-meta,
  body.appointly-template-studio .apptly-list-footer {
    justify-content: center;
  }

  body.appointly-template-studio .apptly-list-footer {
    flex-direction: column;
  }

  body.appointly-template-studio .apptly-list-footer .appointly-service-select,
  body.appointly-template-studio .appointly-service-gallery-actions .appointly-service-select {
    width: 100%;
  }

  body.appointly-template-studio .appointly-service-gallery-photo {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
  }

  body.appointly-template-studio .appointly-service-gallery-title {
    padding-right: 0;
    font-size: 22px;
  }

  body.appointly-template-studio .appointly-service-gallery-meta {
    justify-content: center;
    flex-wrap: wrap;
    font-size: 17px;
  }

  body.appointly-template-studio .appointly-service-gallery-actions {
    justify-content: center;
  }

  body.appointly-template-studio .appointly-standalone-step-actions,
  body.appointly-template-studio .tw-flex.tw-justify-end.tw-mt-6:not(.hidden) {
    position: sticky;
    bottom: 0;
    z-index: 30;
    justify-content: center;
    margin: 28px -20px 0;
    padding: 14px 20px;
    box-shadow: 0 -12px 32px rgba(32, 41, 66, 0.08);
  }

  body.appointly-template-studio .appointly-standalone-step-actions .btn,
  body.appointly-template-studio .tw-flex.tw-justify-end.tw-mt-6:not(.hidden) .btn {
    width: 100%;
  }

  body.appointly-template-studio .datepicker table tr td,
  body.appointly-template-studio .datepicker table tr th {
    height: 46px;
    font-size: 14px;
  }

  body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-calendar-statusbar {
    grid-template-columns: 1fr;
  }

  body.appointly-template-studio.appointly-calendar-studio-view .appointly-studio-price-summary {
    justify-content: space-between;
    border-top: 1px solid var(--studio-line);
    border-left: 0;
  }

  body.appointly-template-studio.appointly-calendar-studio-view .appointly-default-scheduler > .tw-bg-white,
  body.appointly-template-studio.appointly-calendar-studio-view #time-slots-section {
    min-height: 0;
  }

  body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr th,
  body.appointly-template-studio.appointly-calendar-studio-view .datepicker table tr td {
    height: 42px;
    font-size: 13px;
  }

  body.appointly-template-studio.appointly-calendar-studio-view #time-slots-section {
    padding: 24px 18px !important;
  }
}

body.appointly-template-studio .appointly-service-gallery-card {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 30px 16px;
  border: 1px solid var(--studio-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer;
  transform: none;
}

body.appointly-template-studio:not(.appointly-services-view-list) #appointly-booking-services {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 12px !important;
}

body.appointly-template-studio .appointly-service-gallery-card:hover,
body.appointly-template-studio .appointly-service-gallery-card.selected {
  border-color: var(--studio-primary) !important;
  box-shadow: 0 10px 24px rgba(32, 41, 66, 0.08) !important;
  transform: none;
}

body.appointly-template-studio .appointly-service-gallery-card.selected::after {
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  font-size: 12px;
}

body.appointly-template-studio .appointly-service-gallery-photo {
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 8px;
}

body.appointly-template-studio .appointly-service-gallery-body {
  min-width: 0;
  padding: 0;
  text-align: left;
}

body.appointly-template-studio .appointly-service-gallery-title {
  min-height: 0;
  margin: 0 28px 4px 0;
  padding-right: 0;
  color: var(--studio-secondary);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

body.appointly-template-studio .appointly-service-read-more {
  margin: 0;
  color: var(--studio-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

body.appointly-template-studio .appointly-service-gallery-meta {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
  color: var(--studio-muted);
  font-size: 12px;
  line-height: 1.2;
}

body.appointly-template-studio .appointly-service-gallery-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

body.appointly-template-studio .appointly-service-gallery-price {
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
}

body.appointly-template-studio .appointly-service-gallery-actions {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 10px;
}

body.appointly-template-studio .appointly-service-select.btn {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
}

body.appointly-template-studio .appointly-summary-breakdown-row .appointly-simple-rate-line,
body.appointly-template-studio .appointly-summary-breakdown-row .appointly-summary-addon-line {
  grid-template-columns: 1fr !important;
}

body.appointly-template-studio .appointly-summary-breakdown-row .appointly-simple-rate-line b,
body.appointly-template-studio .appointly-summary-breakdown-row .appointly-summary-addon-line b {
  text-align: left !important;
  white-space: normal !important;
}

/* ==========================================================================
   MOBILE INNER-OVERFLOW FIXES, STUDIO TEMPLATE (2026-08-29)
   The 2026-08-24 container-width fix left the booking column at 254px on a
   390px phone, which exposed the inner overflows below that .main_wrapper's
   overflow:hidden then clipped.
   ========================================================================== */

/* 1. Service grid. repeat(auto-fit, minmax(300px, 1fr)) cannot make a track
      narrower than 300px, so in a 254px column the grid ran 46px wide and the
      cards' "Best Seller" badge and "Select" button were cut off. min() lets
      the track collapse on narrow screens; at 300px and up nothing changes.
      "html" is in the selector on purpose: the view's inline <style> holds an
      identical !important copy of this rule and loads after this file, so the
      override needs one more element to outrank it. */
html body.appointly-template-studio:not(.appointly-services-view-list) #appointly-booking-services {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important;
}

@media (max-width: 767px) {
  /* 2. Progress rail. Six or seven fixed 86px steps in a 294px rail left only
        3.4 visible, with no labels and no scroll affordance, so the customer
        could not tell which step they were on. Let the steps share the rail;
        at seven steps they are still 42px wide. The rail keeps the
        overflow-x:auto it already had, so a narrower phone still scrolls. */
  body.appointly-template-studio .appointly-standalone-progress ol {
    width: 100%;
    min-width: 0;
  }
  body.appointly-template-studio .appointly-standalone-progress ol > li {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }
  body.appointly-template-studio .appointly-standalone-progress-step {
    width: 100%;
    min-width: 0;
    padding: 12px 3px 10px;
  }
  body.appointly-template-studio .appointly-standalone-progress-step i {
    max-width: 100%;
  }

  /* 3. Card meta row. The price pill is white-space:nowrap and 118px wide, so
        it overran the 150px body column by 24px and was clipped. The view's
        inline <style> forces flex-wrap:nowrap on every template because
        per-day price labels are long; re-allow wrapping for studio phones
        only, which still keeps duration and price on one row when they fit. */
  body.appointly-template-studio .appointly-service-gallery-meta {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 380px) {
  /* Below ~380px the 56px thumbnail leaves the body column narrower than the
     price pill itself, so the pill was still being cut. Give the thumbnail
     less of the card and let the price label wrap inside its pill rather than
     lose the end of the price. */
  body.appointly-template-studio .appointly-service-gallery-card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }
  body.appointly-template-studio .appointly-service-gallery-photo {
    width: 44px;
    height: 44px;
  }
  body.appointly-template-studio .appointly-service-gallery-meta {
    gap: 6px;
  }
  body.appointly-template-studio .appointly-service-gallery-price {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
  }

  /* Same reason: a single long word in a service name ("Masterclasses") is
     wider than the body column at these widths and ran past the card edge. */
  body.appointly-template-studio .appointly-service-gallery-title {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* ==========================================================================
   DATE & TIME STEP: month/year labels and weekday header — 2026-08-29
   Both symptoms come from the studio rules earlier in this file, not xdsoft.
   ========================================================================== */

/* The month and year labels are flex items in the calendar header, and the rule
   above gives them `flex: 1 1 auto`. The grow half is wanted: on desktop they
   expand to fill the header. The shrink half is not: at 390px "August" needs
   69px of text inside a label that shrank to 80px including 24px of padding,
   so the span's text-overflow:ellipsis rendered it as "A..." and "2026" as
   "2...". Keep the grow, drop the shrink, and let the span size to its text.
   Deliberately not inside a media query: the same squeeze truncates the labels
   at 768px too, and because the labels still grow, every width from 1440 down
   measures identically to before. */
body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label {
  flex: 1 0 auto;
}

body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label > span {
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 767px) {
  /* Weekday cells are 40px wide at a 390px viewport while "Mon" and "Wed" need
     42px at the inherited 16px, so the header ran together as
     SUNMONTUEWEDTHU FRI SAT. */
  body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar th {
    padding-left: 0;
    padding-right: 0;
    font-size: 13px;
  }
}

@media (max-width: 359px) {
  /* 30px cells at 320px need one more step down. */
  body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_calendar th {
    font-size: 11px;
  }

  /* Labels that refuse to shrink need the room back at this width: at 19px the
     two of them plus the arrows overran the 208px header by 8px. */
  body.appointly-template-studio.appointly-calendar-studio-view #step-3 .xdsoft_datetimepicker .xdsoft_label {
    padding: 0 4px !important;
    font-size: 16px;
  }
}