.kc-class-msg { margin-top: .5rem; }
.kc-class-msg.error { color: #b32d2e; }
.kc-class-msg.ok    { color: #2271b1; }

/* === Classes grid & cards === */
#kc-classes .kc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

#kc-weekly-pass .kc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1000px) {
  #kc-classes .kc-grid { grid-template-columns: repeat(2, 1fr); }
  #kc-weekly-pass .kc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  #kc-classes .kc-grid { grid-template-columns: 1fr; }
  #kc-weekly-pass .kc-grid { grid-template-columns: 1fr; }
}

.kc-class-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.kc-class-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.8rem;
}

.kc-class-card .kc-instructor,
.kc-class-card .kc-meta {
  font-size: .9rem;
  color: #555;
  margin: 0 0 .5rem;
}

.kc-class-card .kc-instructor {
  font-weight: 700;
}

.kc-class-card .kc-meta-time {
  display: inline-block;
  margin-top: .15rem;
}

.kc-class-card .kc-spaces {
  font-weight: 400;
  margin-bottom: .75rem;
}

.kc-class-card .kc-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.kc-class-card button {
  cursor: pointer;
  border: 1px solid #d0d7de;
  background: #f6f8fa;
  border-radius: 8px;
  padding: .45rem .75rem;
}
.kc-class-card button.primary {
  background: #2271b1;
  border-color: #2271b1;
  color: #fff;
}

.kc-card-book {
  display: none;
  margin-top: .75rem;
  border-top: 1px dashed #e2e8f0;
  padding-top: .75rem;
}
.kc-class-card.is-open .kc-card-book { display: block; }

.kc-card-book form {
  display: grid;
  gap: .5rem;
}
.kc-card-book label {
  display: block;
  font-size: .9rem;
  margin: 0 0 .25rem;
}
.kc-card-book input[type="text"],
.kc-card-book input[type="email"] {
  width: 100%;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: .5rem .6rem;
}

.kc-class-msg.ok    { color: #2271b1; }
.kc-class-msg.error { color: #b32d2e; }

/* Make inputs obey the card width */
#kc-classes .kc-class-card {
  overflow: hidden;              /* prevent child overflow */
}

#kc-weekly-pass .kc-class-card {
  overflow: hidden;
}

#kc-classes .kc-card-book form {
  display: grid;
  grid-template-columns: 1fr;    /* single column on all sizes (simple) */
  gap: .75rem;
}

#kc-weekly-pass .kc-card-book form {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

/* Ensure inputs never exceed the card */
#kc-classes .kc-card-book input[type="text"],
#kc-classes .kc-card-book input[type="email"],
#kc-classes .kc-card-book input[type="tel"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;                  /* fixes overflow in some browsers */
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: .5rem .6rem;
}

#kc-weekly-pass .kc-card-book input[type="text"],
#kc-weekly-pass .kc-card-book input[type="email"],
#kc-weekly-pass .kc-card-book input[type="tel"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  padding: .5rem .6rem;
}

/* Keep long titles/meta from pushing the layout */
#kc-classes .kc-class-card h3,
#kc-classes .kc-class-card .kc-meta {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

#kc-weekly-pass .kc-class-card h3,
#kc-weekly-pass .kc-class-card .kc-meta {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* Buttons wrap nicely inside the card */
#kc-classes .kc-class-card .kc-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;               /* allow wrapping on small widths */
}

#kc-weekly-pass .kc-class-card .kc-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

#kc-classes .kc-class-card button {
  max-width: 100%;
}

#kc-weekly-pass .kc-class-card button {
  max-width: 100%;
}

/* Optional: slightly smaller inputs on very narrow screens */
@media (max-width: 480px) {
  #kc-classes .kc-card-book input[type="text"],
  #kc-classes .kc-card-book input[type="email"],
  #kc-classes .kc-card-book input[type="tel"] {
    padding: .45rem .55rem;
  }

  #kc-weekly-pass .kc-card-book input[type="text"],
  #kc-weekly-pass .kc-card-book input[type="email"],
  #kc-weekly-pass .kc-card-book input[type="tel"] {
    padding: .45rem .55rem;
  }
}