/**
 * OSMDentis — Registration landing page (/register/)
 * Cards Student + Medical Resident.
 * Note: page-id-227040 scoping removed; this file only loads on the
 * Register page (via page-styles.php slug map).
 */

.osm-card {
  border-radius: 18px;
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.osm-card.osm-blue {
  background: linear-gradient(165deg, rgba(102,155,188,0.12) 0%, rgba(102,155,188,0.03) 60%);
  border: 0.5px solid rgba(102,155,188,0.22);
}
.osm-card.osm-teal {
  background: linear-gradient(165deg, rgba(102,155,188,0.09) 0%, rgba(102,155,188,0.02) 60%);
  border: 0.5px solid rgba(102,155,188,0.18);
}

.osm-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  pointer-events: none;
}
.osm-card.osm-blue::before {
  background: linear-gradient(90deg, transparent, rgba(102,155,188,0.50), transparent);
}
.osm-card.osm-teal::before {
  background: linear-gradient(90deg, transparent, rgba(102,155,188,0.40), transparent);
}

.osm-card.osm-blue:hover {
  transform: translateY(-4px);
  border-color: rgba(102,155,188,0.42);
}
.osm-card.osm-teal:hover {
  transform: translateY(-4px);
  border-color: rgba(102,155,188,0.38);
}

.osm-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.osm-ic {
  width: 50px; height: 50px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.osm-blue .osm-ic {
  background: rgba(102,155,188,0.18);
  border: 0.5px solid rgba(102,155,188,0.40);
  color: #669bbc;
}
.osm-teal .osm-ic {
  background: rgba(102,155,188,0.14);
  border: 0.5px solid rgba(102,155,188,0.35);
  color: #669bbc;
}

.osm-card-title {
  font-size: 21px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
}

.osm-card-desc {
  font-size: 14px;
  color: rgba(255,255,255,0.48);
  line-height: 1.6;
  margin-bottom: 20px;
}

.osm-incl-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  margin-bottom: 12px;
}

.osm-incl {
  list-style: none;
  margin: 0 0 22px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.osm-incl li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.62);
}
.osm-chk {
  width: 18px; height: 18px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}
.osm-blue .osm-chk { background: rgba(102,155,188,0.18); color: #669bbc; }
.osm-teal .osm-chk { background: rgba(102,155,188,0.14); color: #669bbc; }

/* ── Buttons ── */
.osm-btn {
  margin-top: auto;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 20px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  gap: 10px !important;
  background: #669bbc !important;
  color: #fff !important;
  text-decoration: none !important;
  text-shadow: none !important;
  outline: none !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

.osm-btn .osm-arr {
  font-size: 16px;
  color: #fff !important;
  transition: transform 0.15s ease;
}

a.osm-btn:link,
a.osm-btn:visited {
  background: #669bbc !important;
  color: #fff !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

a.osm-btn:hover,
a.osm-btn:focus,
a.osm-btn:active {
  background: #5688a3 !important;
  color: #fff !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
}

a.osm-btn:hover .osm-arr {
  transform: translateX(4px);
  color: #fff !important;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .osm-card {
    min-height: unset;
    margin-bottom: 16px;
  }
}